mui幾種頁面跳轉(zhuǎn)方式對比

http://blog.csdn.net/uikoo9/article/details/44676963

【幾種打開頁面的方式】

1.初始化時創(chuàng)建子頁面

2.直接打開新頁面

3.預(yù)加載頁面

【示例】

1.初始化時創(chuàng)建子頁面

[js]?view plain?copy

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ù)??

????}]??

});??

[js]?view plaincopy

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.直接打開新頁面

[js]?view plain?copy

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ū)挾?#xff0c;默認(rèn)根據(jù)內(nèi)容自動計算合適寬度??

????????????height:?waiting?-?dialog?-?height,?//等待框背景區(qū)域高度，默認(rèn)根據(jù)內(nèi)容自動計算合適高度??

????????????......??

????????}??

????}??

})??

[js]?view plaincopy

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ū)挾?#xff0c;默認(rèn)根據(jù)內(nèi)容自動計算合適寬度??

????????????height:?waiting?-?dialog?-?height,?//等待框背景區(qū)域高度，默認(rèn)根據(jù)內(nèi)容自動計算合適高度??

????????????......??

????????}??

????}??

})??

3.預(yù)加載頁面

[js]?view plain?copy

//?方式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ù)??

});??

[js]?view plaincopy

//?方式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è)滑菜單

子頁面有其有點，特別適用與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ù)加載方式。

總結(jié)

以上是生活随笔為你收集整理的mui几种页面跳转方式对比的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。