這次帶給大家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，而非子頁面相當於新開了一個瀏覽器視窗載入了一個html2.子頁面適用於側滑選單##子頁面有其有點，特別適用與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播放器H5如何做出碎片式的圖片切換以上是mui的頁面跳躍方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
