首頁  >  文章  >  web前端  >  如何優化mui清單跳到詳情頁

如何優化mui清單跳到詳情頁

小云云
小云云原創
2018-03-19 17:40:472745瀏覽

因為列表頁到詳情頁是多對一的形式,即列表頁的多個數據列表對應的是一個詳情頁,只是數據不同而;因此,可以在加載列表頁時預加載詳情頁,即創建一個詳情頁的webview,但是不顯示出來,點擊列表的時候在通過特定方法觸發詳情頁的事件,獲取響應數據,這種做法可以極大程度的縮短響應的時間。

實作方法

  1. 透過預先載入提前載入詳情頁;

  2. 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」變數;但是方法二隻能同時建立一個預先載入的頁面;

二、透過mui.fire觸發自訂事件

原理:兩個同時存在的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頁面跳轉方式之間的差異

##MUI實作上拉載入和下拉刷新的實例分享

mui js傳回刷新頁面的方法實例程式碼

以上是如何優化mui清單跳到詳情頁的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn