使用mui架構開啟頁面的幾種不同方式，mui架構頁面幾種

使用mui架構開啟頁面的幾種不同方式，mui架構頁面幾種

 

 

 

1.建立子頁面：

 list.html就是index.html的子頁面，建立代碼比較簡單，如下：

mui.init({      subpages: [{          url: 'list.html',             //子頁面HTML地址，支援本地地址和網路地址          id: 'list.html',              //子頁面標誌          styles: {              top:45px ,              //mui標題列預設高度為45px            bottom:0px ,      //子頁面底部位置              },        }]  });  

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.預先載入頁面

從A頁面開啟B頁面，B頁面為一個需要從服務端載入的列表頁面，若在B頁面loaded事件發生時就將其顯示出來，因伺服器資料尚未載入完畢，列表頁面為空白，使用者體驗不好；可通過如下方式改善使用者體驗：

//A頁面中開啟B頁面，設定show的autoShow為false，則B頁面在其loaded事件發生後，不會自動顯示；

mui.openWindow({    url: 'B.html',     show:{      autoShow:false    }  });

 

第二步，在B頁面擷取列表資料後，再關閉等待框、顯示B頁面 

  //B頁面onload從伺服器擷取列表資料；window.onload = function(){  mui.plusReady(function(){       //關閉等待框    plus.nativeUI.closeWaiting();           //顯示當前頁面    mui.currentWebview.show();  });}

 

 

畫龍點睛：小編在此解釋一下子頁與非子頁的區別是子頁面相當於html中的iframe，而非子頁面相當於新開了一個瀏覽器視窗載入了一個html。

                       需要下拉重新整理上拉載入請使用子頁面，

                       需要開啟一個新頁面請使用新頁面方式，