How to optimize mui list to jump to details page

Because the list page to the details page is in a many-to-one format, that is, multiple data lists on the list page correspond to one details page, but the data is different; therefore, the details page can be preloaded when loading the list page, that is, Create a webview of the details page, but do not display it. When the list is clicked, the event of the details page is triggered through a specific method to obtain the response data. This approach can greatly shorten the response time.

Implementation method

1. Load the details page in advance through preloading;

2. mui.fire trigger Specify the event on the details page and call ajax to update the data;

1. Implementation of preloading (two methods):

Official address

Preloading method one:

Configure through the preloadPages parameter in the mui.init method.

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制});

In use, you may not use so many attributes. The following is my use case:

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

You only need to set the url and id, which are required for the details page Parameters are passed when using mui.fire;

Preloading method two:

Preload through the mui.preload method.

var page = mui.preload({    url:new-page-url,    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数});

Comparison of two preloading methods:

1. Method one creates a preloaded page asynchronously, and can create multiple pages at the same time, but because it is asynchronous, it cannot Get the created webview object immediately, and you need to use plus.webview.getWebviewById to get the created webview;
2. Method 2 is to create a preloaded page synchronously. You can get the webview synchronously after creation, that is, method 2 "page" variable; but method two can only create one preloaded page at the same time;

2. Trigger custom events through mui.fire

Principle: two simultaneous Webviews can use the mui.fire method to trigger custom events in another webview. Therefore, we can create a custom event in the details page and listen to the mui.fire method in the list page.
mui.fire( target , event , data )
target: the webview of the details page (details page preloaded in the list page);
event: the custom event monitored in the details page;
data: Parameters that need to be passed to the details page;

1. Create and listen to the custom event "account_bid_detail_fire" on the details page:

$.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 Parameters passed from the list page They are all in event.detail, which can be output for detailed viewing;

2. Trigger the "account_bid_detail_fire" event on the list page:

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' //
        }
    });
});

Next, the details can be triggered when the list is clicked on the list page The "account_bid_detail_fire" event of the page, and then trigger the ajax of the details page to update the requested data; Big release of resource collection: https://www.jianshu.com/p/e8197d4d9880

Benefit 2: Full set of detailed video tutorials on getting started with WeChat mini programs and practical implementation: https://www.jianshu.com/p/e8197d4d9880

related suggestion:

Comparison and summary of the differences between mui page jump methods

Example sharing of MUI implementation of pull-up loading and pull-down refresh

mui js Return the method instance code for refreshing the page

The above is the detailed content of How to optimize mui list to jump to details page. For more information, please follow other related articles on the PHP Chinese website!