第一篇：扣丁學(xué)堂簡述mui幾種頁面跳轉(zhuǎn)方式

扣丁學(xué)堂簡述mui幾種頁面跳轉(zhuǎn)方式

現(xiàn)在想要學(xué)習(xí)HTML5開發(fā)技術(shù)的小伙伴仍然在不斷的增加，所以現(xiàn)在不論是參加HTML5培訓(xùn)還是自學(xué)HTML5開發(fā)技術(shù)的人都在不斷的增加，本篇文章小編主要介紹了mui幾種頁面跳轉(zhuǎn)方式對比，創(chuàng)建子頁面，打開新頁面，預(yù)加載頁面三種方式做出了對比，對HTML5開發(fā)感興趣的小伙伴就隨小編一起來看一下吧。

【幾種打開頁面的方式】

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

2、直接打開新頁面

3、預(yù)加載頁面

【示例】

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

mui.init({ subpages: [{ url: yoururl, //子頁面HTML地址，支持本地地址和網(wǎng)絡(luò)地址 id: yourid, //子頁面標(biāo)志 styles: { top: subpageposition, //子頁面頂部位置

bottom: subpageposition, //子頁面底部位置 width: subpageheight, //子頁面高度，默認(rèn)為100%......}, extras: {} //額外擴展參數(shù) }] });

2、直接打開新頁面

mui.openWindow({ url: newurl, id: newid, styles: { top: newpageposition, //新頁面頂部位置

bottom: newageposition, //新頁面底部位置 width: newpageheight, //新頁面高度，默認(rèn)為100%......}, extras: {.....//自定義擴展參數(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: waitingwidht, //等待框背景區(qū)域?qū)挾龋J(rèn)根據(jù)內(nèi)容自動計算合適寬度

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

3、預(yù)加載頁面

// 方式1 mui.init({ preloadPages: [{ url: prelaodurl, id: preloadid, styles: {}, //窗口參數(shù)

extras: {}, //自定義擴展參數(shù)

subpages: [{}, {}] //預(yù)加載頁面的子頁面 }] });

// 方式2 var page = mui.preload({ url: newurl, id: newid, //默認(rèn)使用當(dāng)前頁面的url作為id styles: {}, //窗口參數(shù)

extras: {} //自定義擴展參數(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)的話，主頁面右滑，新頁面不右滑，還得單獨處理新頁面。

3、子頁面實用頻繁切換的情況

如果頻繁左滑右滑，在配置較低的手機上會出現(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只是加載，你可以之后選擇打開的時機。

7、總結(jié)

需要下拉刷新上拉加載請使用子頁面，需要打開一個新頁面請使用新頁面方式，需要加載一個頁面但是暫時不使用請使用預(yù)加載方式。

以上就是小編給大家分享的mui幾種頁面跳轉(zhuǎn)方式對比總結(jié)概括，希望對小伙伴們有所幫助，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢。