因為列表頁到詳情頁是多對一的形式，即列表頁的多個數據列表對應的是一個詳情頁，只是數據不同而；因此，可以在加載列表頁時預加載詳情頁，即創建一個詳情頁的webview,但是不顯示出來，點擊列表的時候在通過特定方法觸發詳情頁的事件，獲取響應數據，這種做法可以極大程度的縮短響應的時間。
透過預先載入提前載入詳情頁；
mui.fire 觸發詳情頁面指定事件，呼叫ajax更新資料；
官方位址
透過mui.init方法中的preloadPages參數進行設定。
mui.init({
preloadPages:[
{
url:prelaod-page-url, id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制});在使用中，可能用不到那麼多的屬性，以下是我的使用案例：
mui.init({ preloadPages: [{
url: 'account_detail.html',
id: 'account_detail.html'
}]
});只需要設定url和id就可以，詳情頁需要的參數在使用mui.fire的時候傳過去；
透過mui.preload方法預先載入。
var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数});1.方法一為非同步建立預先載入頁面，並且可以同時建立多個頁面，但是由於是非同步的，因此不能立即取得到建立的webview對象，並且需要使用plus.webview.getWebviewById來取得到建立的webview;
2.方法二為同步建立預先載入頁面，可以在建立後同步取得到webview,即方法二的「page」變數；但是方法二隻能同時建立一個預先載入的頁面；
原理：兩個同時存在的webview之間可以透過mui.fire方法來觸發另一個webview中的自訂事件，因此，我們可以在詳情頁中建立一個自訂事件，監聽清單頁中的mui.fire方法。
mui.fire( target , event , data )
target:詳情頁（列表頁中預先載入的詳情頁）的webview;
event:詳情頁中監聽的自訂事件；
data:需要傳給詳情頁的參數；
1.在詳情頁建立並監聽自訂事件「account_bid_detail_fire」：
$.plusReady(function() { /**
* 实例化获取接口数据方法
*/
var get_bid_detail = new GET_BID_DETAIL(); window.addEventListener('account_bid_detail_fire', function(event) { //获得事件参数
var id = event.detail.id; console.log(JSON.stringify(event.detail)); //触发ajax，根据id向服务器请求当前列表详情
get_bid_detail.init(id);
});
});mui.fire從清單頁傳的參數都在event.detail中，可以輸出具體查看；
2.在列表頁觸發“account_bid_detail_fire”事件：
mui(document.body).on("tap", ".account_bid_list", function() {//触发详情页面的account_bid_detail_fire事件
var detail_webview = null; if(!detail_webview) { //判断webview是否存在
detail_webview = plus.webview.getWebviewById("account_detail.html");
} //detail_webview是在列表页中预加载的页面；
mui.fire(detail_webview, 'account_bid_detail_fire', { id: _this.dataset.id
}); //打开详情页面
mui.openWindow({ id: "account_detail.html",//详情页webview的id
show: { aniShow: 'none', //页面不显示动画
duration: '0' //
}
});
});接下來，在列表頁點擊列表的時候就可觸發詳情頁的「account_bid_detail_fire」事件，然後觸發詳情頁的ajax來更新請求的資料；
福利一：前端，Java，產品經理，微信小程序，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程式入門與實戰全套詳細影片教學：https://www.jianshu.com/p/e8197d4d9880
#相關推薦：
以上是如何優化mui清單跳到詳情頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！
