簡述:mui預(yù)加載完美解決混合應(yīng)用弱網(wǎng)白屏問題,給用戶更好的體驗择诈,一旦使用了預(yù)加載創(chuàng)建子頁面?zhèn)鬟f參數(shù)就會失效秧耗,解決辦法是使用自定義事件。
一:創(chuàng)建預(yù)加載頁面
var webView_detail = null;
mui.plusReady(function() {
console.log("H5+準(zhǔn)備完畢");
//預(yù)加載
webView_detail = mui.preload({
url: 'news_info.html',
id: 'news_info',
styles: {
"render": "always", //一直渲染
"popGesture": "hide",
"bounce": "vertical",
// "bounceBackground": "#efeff4",
// "titleNView": {} //使用原生漸變導(dǎo)航
}
});
二:點(diǎn)擊按鈕顯示預(yù)加載頁面
//綁定點(diǎn)擊事件 #news_btns 是一個有許多 .news_btn標(biāo)簽的元素, 具體用法可以參照
mui('#news_btns').on('tap', '.news_btn', function() {
console.log("打開預(yù)加載頁面");
//自定義事件傳值
mui.fire(webView_detail,'get_detail',{
name:'張肖',
});
setTimeout(function(){
webView_detail.show("slide-in-right", 300);
},150);
});
三:預(yù)加載頁面接收自定義事件闖過來的參數(shù)
mui.plusReady(function() {
//監(jiān)聽自定義事件
document.addEventListener('get_detail',function(event) {
var detail = event.detail.name;
alert("name========"+detail);
});
})
四:監(jiān)聽返回按鈕
//監(jiān)聽back按鈕
mui.back = function(){
//重寫back方法 pop操作不會自動執(zhí)行
plus.webview.currentWebview().hide("auto", 300);
};
自定義事件
/*
webView_detail:子頁面的webView
get_detail:子頁面注冊的方法名
*/
mui.fire(webView_detail,'get_detail',{
name:'張肖',
});
/*
子頁面監(jiān)聽自定義事件
event.detail:獲取mui內(nèi)部封裝的值對象
event.detail.name:獲取傳過來的值自己定義
*/
document.addEventListener('get_detail',function(event) {
var detail = event.detail.name;
alert("name========"+detail);
});