@dcloud
使用了社区大神总结的父模板方法,在子页面打开子页面的时候,点击返回直接到了第一个页面。
公用js代码如下:
// 定义全局变量
var template ={};
var subWebview ={};
mui.plusReady(function() {
//预加载模板父页面
template = mui.preload({
url:'template.html',
id:'template',
styles:{
popGesture:"hide"
}
});
//预加载共用子页面
subWebview = mui.preload({
url:'template-sub.html',
id:'template_sub',
styles:{
top: '44px',
bottom: '0px'
}
});
subWebview.hide();
template.append(subWebview);
});
mui('.win').on('tap', 'a', function(e) {
var title = this.getAttribute('title');
var param = this.getAttribute('param');
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
mui.fire(subWebview, 'getParam', {
param: param
});
subWebview.addEventListener('loaded', function() {
setTimeout(function(){
subWebview.show();
},50);
});
template.show('slide-in-right', 150);
});
template页面代码:
<script type="text/javascript" charset="utf-8">
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
}
});
var contentWebview = null,self = null;
var titleElem = document.getElementById("title");
mui.plusReady(function () {
self = plus.webview.currentWebview();
});
mui.back = function() {
var current = plus.webview.currentWebview();
current.hide('auto');
setTimeout(function() {
titleElem.className = 'mui-title mui-fadeout';
titleElem.innerText = '';
if(contentWebview==null){
contentWebview = current.children()[0];
}
contentWebview.hide("none");
}, 350);
}
</script>
案例操作流程:
1、点击分类选项卡页面
2、分类页面点击“联想”子分类,进入商品列表页面
3、商品列表页面点击“商品图片”,进入商品详情页面
进入商品列表和进入商品详情页面 都使用了上述代码载入父页面的方法,在详情页面点击返回按钮的时候就直接到 选项卡分类页面了! 而且在返回的时候,页面也有闪屏的bug!
3 个回复
黑虎
是啊,遇到相类似问题,打开非预加载的子页面,返回时父窗口就闪一下
chender - 与人为善
id一样导致的,不同层级的template需要设置不同的id,要不然是同一个webview,当然会有问题
Danny - QQ125904483
http://ask.dcloud.net.cn/question/5883