简述：mui预加载完美解决混合应用弱网白屏问题，给用户更好的体验，一旦使用了预加载创建子页面传递参数就会失效，解决办法是使用自定义事件。
一：创建预加载页面
var webView_detail = null;
mui.plusReady(function() {
console.log("H5+准备完毕");
//预加载
webView_detail = mui.preload({
url: 'news_info.html',
id: 'news_info',
styles: {
"render": "always", //一直渲染
"popGesture": "hide",
"bounce": "vertical",
// "bounceBackground": "#efeff4",
// "titleNView": {} //使用原生渐变导航
}
});
二：点击按钮显示预加载页面
//绑定点击事件 #news_btns 是一个有许多 .news_btn标签的元素, 具体用法可以参照
mui('#news_btns').on('tap', '.news_btn', function() {
console.log("打开预加载页面");
//自定义事件传值
mui.fire(webView_detail,'get_detail',{
name:'张肖',
});
setTimeout(function(){
webView_detail.show("slide-in-right", 300);
},150);
});
三：预加载页面接收自定义事件闯过来的参数
mui.plusReady(function() {
//监听自定义事件
document.addEventListener('get_detail',function(event) {
var detail = event.detail.name;
alert("name========"+detail);
});
})
四：监听返回按钮
//监听back按钮
mui.back = function(){
//重写back方法 pop操作不会自动执行
plus.webview.currentWebview().hide("auto", 300);
};
自定义事件
/*
webView_detail：子页面的webView
get_detail：子页面注册的方法名
*/
mui.fire(webView_detail,'get_detail',{
name:'张肖',
});
/*
子页面监听自定义事件
event.detail：获取mui内部封装的值对象
event.detail.name：获取传过来的值自己定义
*/
document.addEventListener('get_detail',function(event) {
var detail = event.detail.name;
alert("name========"+detail);
});
网友评论