使用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。

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

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