mui幾種打開頁面的方式

幾種打開頁面的方式

1.初始化時建立子頁面

2.直接打開新頁面

3.預加載頁面

 

1.初始化時建立子頁面

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 方式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只是加載，你能夠以後選擇打開的時機。

 

總結

須要下拉刷新上拉加載請使用子頁面，

須要打開一個新頁面請使用新頁面方式，

須要加載一個頁面可是暫時不使用請使用預加載方式