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

时间:2022-11-09 16:34:42

所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升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<len;i++){
                    htm += '<div class="tc1" >'
                    htm += '<img src="'+my_photo+data.data[i].photo+'" alt="" />'
                            +'<p><button data-href="product_details.html?id='+data.data[i].id+'" class="but">立即下单</button></p>';

                    htm += '</div>';
                }

                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