四大天王是姐妹
四大天王是姐妹
  • 发布:2015-08-11 18:10
  • 更新:2015-09-17 08:50
  • 阅读:2582

预加载父模板,在子页面继续打开页面,返回问题

分类:HTML5+

@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!

2015-08-11 18:10 负责人:无 分享
已邀请:
黑虎

黑虎

是啊,遇到相类似问题,打开非预加载的子页面,返回时父窗口就闪一下

chender

chender - 与人为善

id一样导致的,不同层级的template需要设置不同的id,要不然是同一个webview,当然会有问题

Danny

Danny - QQ125904483

http://ask.dcloud.net.cn/question/5883

该问题目前已经被锁定, 无法添加新回复