最近在優化自己用mui開發的app,主要還是針對交互這塊兒,這里簡單給大家說一下問題點場景,就是我是通過動態添加底部tabBar的方法創建了一個底部可以切換的操作區域,代碼如下:
mui.init();
var defaultpage = "tab-webview-subpage-product.html"; // 定義默認選項卡子頁面
var newPage = '';
// 定義所有子頁面
var subpages = ['tab-webview-subpage-product.html', 'tab-webview-subpage-shopping.html',
'tab-webview-subpage-me.html'
];
// 頁面加載完成后加載子頁面
mui.plusReady(function() {
var current = plus.webview.currentWebview(); //獲取當前頁面的窗口對象
// 加載所有子頁面
for (let i = 0; i < 3; i++) {
var sub = plus.webview.create(subpages[i],subpages[i], {
top: '0px',
bottom: '50px'
}
);
// 除默認頁面外,其他子頁面隱藏
if (subpages[i] != defaultpage) {
sub.hide();
}
current.append(sub); // 子頁面加入窗口對象
}
});
// 創建點擊事件
mui("#nav-tabbar").on("tap", "a", function(e) {
newPage = this.id + ".html";
if(defaultpage == newPage) {
return;
};
plus.webview.hide(defaultpage); // 隱藏上一個子頁面
plus.webview.show(this.id + ".html") // 顯示當前點擊頁面
newPage = defaultpage = this.id + ".html"; // 記錄當前點擊頁面
});
這種方法生成的多個html頁面有一個問題,就是無法使用mui.ready或mui,plusReady來監聽該頁面被加載了,從而無法做一些刷新頁面內容或者數據的操作,此時會想到用自定義事件mui,fire方法,但是經驗證也行不通,這里的解決方法只能是在有刷新要求的頁面寫如下代碼即可
mui.plusReady(function () {
// 每次進入到這個頁面觸發下面的函數
plus.webview.currentWebview().addEventListener("show",function(){
//這里定義你的處理方法
},false);
})