mui如何優(yōu)化實(shí)現(xiàn)列表跳轉(zhuǎn)到詳情頁

這篇文章將為大家詳細(xì)講解有關(guān)mui如何優(yōu)化實(shí)現(xiàn)列表跳轉(zhuǎn)到詳情頁，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。

因?yàn)榱斜眄摰皆斍轫撌嵌鄬σ坏男问剑戳斜眄摰亩鄺l數(shù)據(jù)列表對應(yīng)的是一個(gè)詳情頁，只是數(shù)據(jù)不同而；因此，可以在加載列表頁時(shí)預(yù)加載詳情頁，即創(chuàng)建一個(gè)詳情頁的webview,但是不顯示出來，點(diǎn)擊列表的時(shí)候在通過特定方法觸發(fā)詳情頁的事件，獲取響應(yīng)數(shù)據(jù)，這種做法可以極大程度的縮短響應(yīng)的時(shí)間。

實(shí)施方法

1. 通過預(yù)加載提前加載詳情頁；

2. mui.fire 觸發(fā)詳情頁面指定事件，調(diào)用ajax更新數(shù)據(jù)；

一、預(yù)加載的實(shí)現(xiàn)（兩種方法）：

官方地址

通過mui.init方法中的preloadPages參數(shù)進(jìn)行配置。

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,      id:preload-page-id,
      styles:{},//窗口參數(shù)
      extras:{},//自定義擴(kuò)展參數(shù)
      subpages:[{},{}]//預(yù)加載頁面的子頁面
    }
  ],
  preloadLimit:5//預(yù)加載窗口數(shù)量限制(一旦超出,先進(jìn)先出)默認(rèn)不限制});

在使用中，可能用不到那么多的屬性，下面是我的使用案例：

mui.init({    preloadPages: [{
        url: 'account_detail.html',
        id: 'account_detail.html'
    }]
});

只需要設(shè)置url和id就可以，詳情頁需要的參數(shù)在使用mui.fire的時(shí)候傳過去；

通過mui.preload方法預(yù)加載。

var page = mui.preload({    url:new-page-url,    id:new-page-id,//默認(rèn)使用當(dāng)前頁面的url作為id
    styles:{},//窗口參數(shù)
    extras:{}//自定義擴(kuò)展參數(shù)});

1.方法一為異步創(chuàng)建預(yù)加載頁面，并且可以同時(shí)創(chuàng)建多個(gè)頁面，但是由于是異步的，因此不能立即獲取到創(chuàng)建的webview對象，并且需要使用plus.webview.getWebviewById來獲取到創(chuàng)建的webview;
2.方法二為同步創(chuàng)建預(yù)加載頁面，可以在創(chuàng)建后同步獲取到webview,即方法二的“page”變量；但是方法二只能同時(shí)創(chuàng)建一個(gè)預(yù)加載的頁面；

二、通過mui.fire觸發(fā)自定義事件

原理：兩個(gè)同時(shí)存在的webview之間可以通過mui.fire方法來觸發(fā)另一個(gè)webview中的自定義事件，因此，我們可以在詳情頁中創(chuàng)建一個(gè)自定義事件，監(jiān)聽列表頁中的mui.fire方法。
mui.fire( target , event , data )
target:詳情頁（列表頁中預(yù)加載的詳情頁）的webview;
event:詳情頁中監(jiān)聽的自定義事件；
data:需要傳給詳情頁的參數(shù)；

1.在詳情頁創(chuàng)建并監(jiān)聽自定義事件“account_bid_detail_fire”：

$.plusReady(function() {            /**
             * 實(shí)例化獲取接口數(shù)據(jù)方法
             */
            var get_bid_detail = new GET_BID_DETAIL();            window.addEventListener('account_bid_detail_fire', function(event) {                //獲得事件參數(shù)
                var id = event.detail.id;                    console.log(JSON.stringify(event.detail));                //觸發(fā)ajax，根據(jù)id向服務(wù)器請求當(dāng)前列表詳情
                get_bid_detail.init(id);
            });
        });

mui.fire從列表頁傳的參數(shù)都在event.detail中，可以輸出具體查看；

2.在列表頁觸發(fā)“account_bid_detail_fire”事件：

mui(document.body).on("tap", ".account_bid_list", function() {//觸發(fā)詳情頁面的account_bid_detail_fire事件
    var detail_webview = null;    if(!detail_webview) {        //判斷webview是否存在
        detail_webview = plus.webview.getWebviewById("account_detail.html");
     }    //detail_webview是在列表頁中預(yù)加載的頁面；
    mui.fire(detail_webview, 'account_bid_detail_fire', {        id: _this.dataset.id
    });    //打開詳情頁面          
    mui.openWindow({       id: "account_detail.html",//詳情頁webview的id
       show: {           aniShow: 'none', //頁面不顯示動(dòng)畫
           duration: '0' //
        }
    });
});

接下來，在列表頁點(diǎn)擊列表的時(shí)候就可觸發(fā)詳情頁的“account_bid_detail_fire”事件，然后觸發(fā)詳情頁的ajax來更新請求的數(shù)據(jù)；

關(guān)于mui如何優(yōu)化實(shí)現(xiàn)列表跳轉(zhuǎn)到詳情頁就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。