如图。菜单显示正常。但是点击返回键之后就空白。
附上代码
mui.init({
swipeBack: false
});
// 主窗口
var main = null;
var subpageFirst = null;
var subpageArr = null;
var targetTab = null;
var loading = null;
var menu=null;
var showMenu = false;
mui.plusReady(function() {
//侧滑菜单开始
plus.screen.lockOrientation("portrait-primary");
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function() {
menu = mui.preload({
id: 'sideslipmenu',
url: '../Sideslip/sideslip.html',
styles: {
left: 0,
width: '70%',
zindex: 9997,
bounce: 'vertical'
},
show: {
// aniShow: 'none'
duration: 1000
}
});
}, 300);
//侧滑菜单结束
showMainpage();
//--
mui.oldBack = mui.back;
var backButtonPress = 0;
mui.back = function(event) {
backButtonPress++;
if(backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
// 监听点击消息事件
plus.push.addEventListener("click", function(msg) {
if(settings.autoLogin && state.token) {
} else {
mui.openWindow({
url: "html/account/login.html",
id: "login",
waiting: {
autoShow: false
}
});
}
}, false);
// 监听在线消息事件
plus.push.addEventListener("receive", function(msg) {
if(msg.aps) { // Apple APNS message
plus.nativeUI.toast("你有新订单，请查收！");
} else {
}
}, false);
/**
* 获取当前窗口对象
*/
main = plus.webview.currentWebview();
var state = app.getState();
/**
* 获取顶部栏的文本节点
*/
var title = document.querySelector(".mui-title");
subpageArr = ["home.html", "customer.html", "myInfo.html"];
/**
* 设置子窗口的样式，顶部默认44px，底部默认50px，并且设置窗口无滚动条；
*/
var subStyles = {
top: "45px",
bottom: "50px",
scrollIndicator: "none"
};
var subpage = null;
for(var i = 0; i < subpageArr.length; i++) {
subpage = plus.webview.create(subpageArr[i], subpageArr[i], subStyles, {
userId: state.account
});
if(i > 0) {
subpage.hide("none");
}
main.append(subpage);
}
//注册新webview的载入完成事件
subpage.addEventListener("loaded", function() {
if(loading)
loading.close(); //新webview的载入完毕后关闭等待框
}, false);
var tabs = document.querySelectorAll(".mui-tab-item");
var activeTab = subpageArr[0];
targetTab = subpageArr[0];
for(var j = 0; j < tabs.length; j++) {
tabs[j].addEventListener("tap", function() {
targetTab = this.getAttribute("data-href");
if(targetTab === activeTab) {
return;
}
if(app.getState().roleId == MARSTER ||
app.getState().roleId == ZHUGUAN ||
app.getState().roleId == XIAOSHOU) {
if(targetTab == subpageArr[0]) {
newRepair.style.visibility = "visible";
} else if(targetTab == subpageArr[1]) {
newRepair.style.visibility = "visible";
} else {
newRepair.style.visibility = "hidden";
}
} else {
newRepair.style.visibility = "hidden";
}
title.innerHTML = this.querySelector(".mui-tab-label").innerHTML;
plus.webview.show(targetTab);
plus.webview.hide(activeTab);
activeTab = targetTab;
});
}
//新增订单
var newRepair = document.getElementById("newRepair");
newRepair.addEventListener('tap', function(event) {
if(targetTab == subpageArr[0]) {
mui.openWindow({
url: "../order/newRepair.html",
id: "newRepair",
waiting: {
autoShow: true
}
});
}
if(targetTab == subpageArr[1]) {
mui.openWindow({
url: "../order/newCustomer.html",
id: "newCustomer",
waiting: {
autoShow: true
}
});
}
});
//监听自定义数据返回刷新事件
window.addEventListener('refreshMain', function(event) {
var index = event.detail.index;
if(index == 0) {
var orderList = plus.webview.getWebviewById("orderListMain");
if(orderList) {
orderList.close();
}
if(subpageFirst == null) {
subpageFirst = plus.webview.currentWebview().children()[0];
}
subpageFirst.evalJS('showNum()');
} else if(index == 1) {
var subpageSec = plus.webview.currentWebview().children()[1];
subpageSec.evalJS("getCustomerList()");
} else if(index == 2) {
}
});
showPopoverpage();
window.addEventListener('showMain', function(event) {
showMainpage();
if(subpageFirst == null) {
subpageFirst = plus.webview.currentWebview().children()[0];
}
subpageFirst.evalJS('showPage()');
showPopoverpage();
if(loading)
loading.close();
});
if(loading)
loading.close();
});
//控制显示
function showMainpage() {
if(app.getState().roleId == null) {
return;
} else {
//白屏不友好，添加原生等待
loading = plus.nativeUI.showWaiting();
}
}
//控制显示
function showPopoverpage() {
var customerRe = document.getElementById('customerRelative');
if(app.getState().roleId == GONGCHENGSHI || app.getState().roleId == VISITER) {
newRepair.style.visibility = "hidden";
customerRe.style.visibility = "hidden";
} else {
if(targetTab != subpageArr[2]) {
newRepair.style.visibility = "visible";
} else {
newRepair.style.visibility = "hidden";
}
customerRe.style.visibility = "visible";
}
}
//侧滑菜单
var isInTransition = false;
/**
* 显示侧滑菜单
*/
function openMenu() {
if(isInTransition) {
return;
} if(!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
isInTransition = true;
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask: 'rgba(0,0,0,0)',
left: '70%',
transition: {
duration: 150
}
});
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
mui.later(function() {
isInTransition = false;
}, 200);
showMenu = true;
});
}
};
/**
* 关闭侧滑菜单
*/
function closeMenu() {
if(isInTransition) {
return;
}
if(showMenu) {
//主窗体开始侧滑；
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 150
}
});
//menu页面同时移动
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
mui.later(function() {
isInTransition = false;
menu.hide();
}, 200);
}
};
document.getElementById("sideslip").addEventListener('tap', openMenu);
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", function(){
console.log("主界面左滑");
closeMenu();
});
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//首页返回键处理
//1、若侧滑菜单显示，则关闭侧滑菜单
//2、否则，执行mui框架默认的关闭首页功能
var _back = mui.back;
mui.back = function() {
if(showMenu) {
closeMenu();
} else {
_back();
}
};
