mui的页面跳转方式
这次给大家带来mui的页面跳转方式,使用mui页面跳转方式的注意事项有哪些,下面就是实战案例,一起来看一下。
【几种打开页面的方式】
1.初始化时创建子页面
2.直接打开新页面
3.预加载页面
【示例】
1.初始化时创建子页面
mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址 id: your - subpage - id, //子页面标志 styles: { top: subpage - top - position , //子页面顶部位置 bottom: subpage - bottom - position, //子页面底部位置 width: subpage - width, //子页面宽度,默认为100% height : subpage - height, //子页面高度,默认为100% ...... }, extras: {} //额外扩展参数 }] });
2.直接打开新页面
mui.openWindow({ url: new - page - url, id: new - page - id, styles: { top: newpage - top - position, //新页面顶部位置 bottom: newage - bottom - position, //新页面底部位置 width: newpage - width, //新页面宽度,默认为100% height: newpage - height, //新页面高度,默认为100% ...... }, extras: { ..... //自定义扩展参数,可以用来处理页面间传值 } show: { autoShow: true, //页面loaded 事件 发生后自动显示,默认为true aniShow: animationType, //页面显示 动画 ,默认为”slide-in-right“; duration: animationTime //页面动画持续时间, Android 平台默认100毫秒,iOS平台默认200毫秒; }, waiting: { autoShow: true, //自动显示等待框,默认为true title: '正在加载...', //等待对话框上显示的提示内容 options: { width: waiting - dialog - widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度 height: waiting - dialog - height, //等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } })
3.预加载页面
// 方式1 mui.init({ preloadPages: [{ url: prelaod - page - url, id: preload - page - id, styles: {}, //窗口参数 extras: {}, //自定义扩展参数 subpages: [{}, {}] //预加载页面的子页面 }] }); // 方式2 var page = mui.preload({ url: new - page - url, id: new - page - id, //默认使用当前页面的url作为id styles: {}, //窗口参数 extras: {} //自定义扩展参数 });
【一些区别】
1.子页面和非子页面
以上三种方式中,2,3打开的页面非子页面,
区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html
2.子页面适用于侧滑菜单
子页面有其有点,特别适用与index.html+list.html这种情况,
如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随,
而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑,还得单独处理新页面。
3.子页面实用频繁切换的情况
如果频繁左滑右滑,在配置较低的手机上会出现list.html遮住index.html的情况,
采用子页面模式就不会,采用新页面模式几率很大。
4.子页面适用与下拉刷新和上拉加载
之前做大下拉刷新的时候,采用的是新页面的形式,
按照官网教程,怎么搞都不成功,
后来看了下源码,发现下拉刷新必须采用子页面的形式,
也就是你的list.html必须是index.html的子页面,才可以下拉刷新。
5.新页面适用于新页面
open一个新页面,适用于查看详情之类的,需要打开一个新页面的情况,
并且mui自己封装了新页面的back方法,你就不需要去操心了。
6.预加载页面的两种方式
第一种是在初始化的时候预加载,
这种情况适合在你这个页面在很久之后才会用,
如果你要立即到的页面并使用,那么你会得到null。
第二种方式类似与open,
个人感觉没有什么太大的区别,
唯一的区别是open就直接打开了,
preload只是加载,你可以之后选择打开的时机。
7.总结
需要下拉刷新上拉加载请使用子页面,
需要打开一个新页面请使用新页面方式,
需要加载一个页面但是暂时不使用请使用预加载方式。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
自定义实现可以播放暂停、进度拖拽、音量控制及全屏的H5播放器
以上是mui的页面跳转方式的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

是否要复制MicrosoftWord中的页面,并保持格式不变?这是一个聪明的想法,因为当您想要创建特定文档布局或格式的多个副本时,在Word中复制页面可能是一种有用的节省时间的技术。本指南将逐步引导您在Word中复制页面的过程,无论是创建模板还是复制文档中的特定页面。这些简单的说明旨在帮助您轻松地重新制作页面,省去从头开始的麻烦。为什么要在MicrosoftWord中复制页面?在Word中复制页面非常有益的原因有以下几点:当您有一个具有特定布局或格式的文档要复制时。与从头开始重新创建整个页面不同

页面刷新在我们日常的网络使用中非常常见,当我们访问一个网页后,有时候会遇到一些问题,比如网页加载不出来或者显示不正常等。这时候我们通常会选择刷新页面来解决问题,那么如何快速地刷新页面呢?下面我们就来探讨一下页面刷新的快捷键。页面刷新快捷键是一种通过键盘操作来快速刷新当前网页的方法。在不同的操作系统和浏览器中,页面刷新的快捷键可能有所不同。下面我们以常见的W

待机是iOS17更新中的一项新功能,它提供了一种新的增强方式,可以在手机快速闲置时访问信息。通过StandBy,您可以方便地查看时间、查看即将发生的事件、浏览日历、获取您所在位置的天气更新等等。激活后,iPhone在充电时设置为横向时会直观地进入待机模式。此功能非常适合床头柜等无线充电点,或者在日常任务中离开iPhone充电时。它允许您轻扫待机中显示的各种小部件,以访问来自各种应用程序的不同信息集。但是,您可能希望根据您的偏好和您经常需要的信息修改这些小部件,甚至删除一些小部件。因此,让我们深入

在iOS中,Apple允许您禁用iPhone上的单个主屏幕页面。还可以重新排列主屏幕页面的顺序,并直接删除页面,而不仅仅是禁用它们。这是它的工作原理。如何重新排列主屏幕页面触摸并按住主屏幕上的空格可进入抖动模式。轻点代表主屏幕页面的圆点行。在显示的主屏幕网格中,轻触并拖动页面以将其相对于其他页面重新排列。其他人会移动以响应您的拖拽动作。当您对新排列感到满意时,点击屏幕右上角的“完成”,然后再次点击“完成”以退出抖动模式。如何禁用或删除主屏幕页面触摸并按住主屏幕上的空格可进入抖动模式。轻点代表主屏

标题:3秒跳转页面实现方法:PHP编程指南在网页开发中,页面跳转是常见的操作,一般情况下我们使用HTML中的meta标签或者JavaScript的方法进行页面跳转。不过,在某些特定的情况下,我们需要在服务器端进行页面跳转。本文将介绍如何使用PHP编程实现一个在3秒内自动跳转到指定页面的功能,同时会给出具体的代码示例。PHP实现页面跳转的基本原理PHP是一种在

《处理Laravel页面无法正确显示CSS的方法,需要具体代码示例》在使用Laravel框架开发Web应用时,有时候会遇到页面无法正确显示CSS样式的问题,这可能会导致页面呈现不正常的样式,影响用户体验。本文将介绍一些处理Laravel页面无法正确显示CSS的方法,并提供具体的代码示例,帮助开发者解决这一常见问题。一、检查文件路径首先要检查CSS文件的路径是

随着互联网的日益发展,许多网站或应用也逐渐变得复杂。当用户在使用时,时常会遇到错误页面,其中最常见的就是404页面。404页面指访问的页面不存在,是常见的错误页面。而对于网站或应用来说,一个漂亮的404页面能极大提升用户体验。在本文中,我们将会介绍如何利用ThinkPHP6快速实现一个漂亮的404页面。创建路由首先,我们需要在route文件夹中创建一个err

标题:Word删除一页内容的方法介绍在使用MicrosoftWord编辑文档时,有时会遇到需要删除某一页内容的情况,可能是想删除文档中的一页空白页或者某一页不需要的内容。针对这种情况,我们可以采取一些方法来快速、有效地删除一页内容。接下来,将介绍一些在MicrosoftWord中删除一页内容的方法。方法一:删除一页内容首先,打开需要编辑的Word文档。定
