MUI预加载,从列表页到详情页

所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验

列表页:

    mui.init({
        swipeBack:true, //启用右滑关闭功能
        //预加载详情页
        preloadPages:[{
        id:'set_meal.html',
        url:'set_meal.html'           
        }
        ]
        });
var setMealPage = '';
mui('.big_pro').on('tap', 'li', function() {
if(this.getAttribute("data-href")!==null){
    setMealPage = plus.webview.getWebviewById('set_meal.html');
    var id = this.getAttribute("id");
    mui.fire(setMealPage,'moreInfo',{id:id});
    mui.openWindow({
    id:'set_meal.html'
    });
    //jump(this.getAttribute("data-href"));
}
});

详情页:


 - window.addEventListener('moreInfo',function(event){          var _id =
   event.detail.id;
            mui.post(my_url+'bike/bike_combo',{id:_id},function(data){
                var len = data.data.length
                var htm="";
                for( var i=0;i'
" >' htm += ''+my_photo+data.data[i].photo+'" alt="" />' +'

'
; htm += '
'; } document.getElementById('taocan').innerHTML = htm; mui(".but").each(function(){ this.addEventListener("tap",function(){ if($(this).attr("data-href")!==null){ jump($(this).attr("data-href")); } }) }) },'json'); });

为了避免打开下一个详情页时,闪一下上一个详情页,模板在详情页返回时,会清空详情页数据

mui.back = function() {
            plus.webview.currentWebview().hide("auto", 300);
        }
        mui.plusReady(function(){
            var self = plus.webview.currentWebview();
            self.addEventListener("hide",function (e) {
                window.scrollTo(0, 0);//重置滚动条位置
                //vm.resetData();//重置页面数据
                document.getElementById("taocan").innerHTML = "";
            },false);
        });

多谢大佬的帮忙DCloud_MUI_CHB
大佬原文地址:http://ask.dcloud.net.cn/article/12575
MUI参考文档地址:http://dev.dcloud.net.cn/mui/event/#customevent

你可能感兴趣的:(MUI预加载,从列表页到详情页)