【幾種打開頁面的方式】
1.初始化時創(chuàng)建子頁面
2.直接打開新頁面
3.預(yù)加載頁面
【示例】
1.初始化時創(chuàng)建子頁面
mui.init({
subpages: [{
url: your - subpage - url, //子頁面HTML地址，支持本地地址和網(wǎng)絡(luò)地址
id: your - subpage - id, //子頁面標(biāo)志
styles: {
top: subpage - top - position, //子頁面頂部位置
bottom: subpage - bottom - position, //子頁面底部位置
width: subpage - width, //子頁面寬度，默認(rèn)為100%
height: subpage - height, //子頁面高度，默認(rèn)為100%
......
},
extras: {} //額外擴(kuò)展參數(shù)
}]
});
2.直接打開新頁面
mui.openWindow({
url: new - page - url,
id: new - page - id,
styles: {
top: newpage - top - position, //新頁面頂部位置
bottom: newage - bottom - position, //新頁面底部位置
width: newpage - width, //新頁面寬度，默認(rèn)為100%
height: newpage - height, //新頁面高度，默認(rèn)為100%
......
},
extras: {
..... //自定義擴(kuò)展參數(shù)，可以用來處理頁面間傳值
}
show: {
autoShow: true, //頁面loaded事件發(fā)生后自動顯示，默認(rèn)為true
aniShow: animationType, //頁面顯示動畫，默認(rèn)為”slide-in-right“；
duration: animationTime //頁面動畫持續(xù)時間，Android平臺默認(rèn)100毫秒，iOS平臺默認(rèn)200毫秒；
},
waiting: {
autoShow: true, //自動顯示等待框，默認(rèn)為true
title: '正在加載...', //等待對話框上顯示的提示內(nèi)容
options: {
width: waiting - dialog - widht, //等待框背景區(qū)域?qū)挾?，默認(rèn)根據(jù)內(nèi)容自動計算合適寬度
height: waiting - dialog - height, //等待框背景區(qū)域高度，默認(rèn)根據(jù)內(nèi)容自動計算合適高度
......
}
}
})
3.預(yù)加載頁面
// 方式1
mui.init({
preloadPages: [{
url: prelaod - page - url,
id: preload - page - id,
styles: {}, //窗口參數(shù)
extras: {}, //自定義擴(kuò)展參數(shù)
subpages: [{}, {}] //預(yù)加載頁面的子頁面
}]
});
// 方式2
var page = mui.preload({
url: new - page - url,
id: new - page - id, //默認(rèn)使用當(dāng)前頁面的url作為id
styles: {}, //窗口參數(shù)
extras: {} //自定義擴(kuò)展參數(shù)
});
【一些區(qū)別】
1.子頁面和非子頁面
以上三種方式中，2，3打開的頁面非子頁面，
區(qū)別是子頁面相當(dāng)于html中的iframe，而非子頁面相當(dāng)于新開了一個瀏覽器窗口加載了一個html
2.子頁面適用于側(cè)滑菜單
子頁面有其有點(diǎn)，特別適用與index.html+list.html這種情況，
如果用index.html(主頁面)+list.html(子頁面)實現(xiàn)的話，當(dāng)主頁面右滑時子頁面會自動跟隨，
而用index.html(主頁面)+list.html(新頁面)實現(xiàn)的話，主頁面右滑，新頁面不右滑，還得單獨(dú)處理新頁面。
3.子頁面實用頻繁切換的情況
如果頻繁左滑右滑，在配置較低的手機(jī)上會出現(xiàn)list.html遮住index.html的情況，
采用子頁面模式就不會，采用新頁面模式幾率很大。
4.子頁面適用與下拉刷新和上拉加載
之前做大下拉刷新的時候，采用的是新頁面的形式，
按照官網(wǎng)教程，怎么搞都不成功，
后來看了下源碼，發(fā)現(xiàn)下拉刷新必須采用子頁面的形式，
也就是你的list.html必須是index.html的子頁面，才可以下拉刷新。
5.新頁面適用于新頁面
open一個新頁面，適用于查看詳情之類的，需要打開一個新頁面的情況，
并且mui自己封裝了新頁面的back方法，你就不需要去操心了。
6.預(yù)加載頁面的兩種方式
第一種是在初始化的時候預(yù)加載，
這種情況適合在你這個頁面在很久之后才會用，
如果你要立即到的頁面并使用，那么你會得到null。
第二種方式類似與open，
個人感覺沒有什么太大的區(qū)別，
唯一的區(qū)別是open就直接打開了，
preload只是加載，你可以之后選擇打開的時機(jī)。
7.總結(jié)
需要下拉刷新上拉加載請使用子頁面，
需要打開一個新頁面請使用新頁面方式，
需要加載一個頁面但是暫時不使用請使用預(yù)加載方式。
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!
