Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to optimize the mui list to jump to the details page". In the daily operation, I believe many people have doubts about how to optimize the mui list to jump to the details page. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to optimize the mui list to jump to the details page". Next, please follow the editor to study!

Implementation method

Load the details page ahead of time by preloading

Mui.fire triggers the event specified on the details page and calls ajax to update the data

First, the implementation of preloading (two methods):

Official address

Preloading method 1:

It is configured through the preloadPages parameter in the mui.init method.

Mui.init ({

PreloadPages: [

{

Url:prelaod-page-url,id:preload-page-id

Styles: {}, / / window parameters

Extras: {}, / / Custom extension parameters

Subpages: [{}, {}] / / preload the child pages of the page

}

]

PreloadLimit:5// preload window number limit (once exceeded, first-in, first-out) does not limit by default})

There may not be so many attributes in use, here is my use case:

Mui.init ({preloadPages: [{

Url:'account_detail.html'

Id:'account_detail.html'

}]

})

You only need to set url and id. The parameters needed on the details page are passed when you use mui.fire.

Preloading method 2:

Preload through the mui.preload method.

Varpage=mui.preload ({url:new-page-url,id:new-page-id,// defaults to the url of the current page as the id

Styles: {}, / / window parameters

Extras: {} / / Custom extension parameters})

Comparison of two preloading methods:

1. Method one is to create preloaded pages asynchronously, and multiple pages can be created at the same time, but because it is asynchronous, the created webview object cannot be obtained immediately, and you need to use plus.webview.getWebviewById to get the created webview.

two。 Method 2 creates a preloaded page synchronously, and you can synchronously get webview, that is, the "page" variable of method 2, but method 2 can only create one preloaded page at the same time.

Second, trigger custom events through mui.fire

Principle: a custom event in another webview can be triggered by the mui.fire method between two co-existing webview, so 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 (the preloaded details page in the list page)

Event: custom events that are monitored in the details page

Data: the parameter 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 () {/ * *

* instantiate the method of obtaining interface data

* /

Varget_bid_detail=newGET_BID_DETAIL (); window.addEventListener ('account_bid_detail_fire',function (event) {/ / get event parameters

Varid=event.detail.id;console.log (JSON.stringify (event.detail)); / / trigger ajax to request the details of the current list from the server according to id

Get_bid_detail.init (id)

})

})

The parameters passed by mui.fire from the list page are all in event.detail, so you can output and view them.

two。 Trigger the "account_bid_detail_fire" event on the list page:

Mui (document.body) .on ("tap", ".account _ bid_list", function () {/ / triggers the account_bid_detail_fire event on the details page

Vardetail_webview=null;if (! detail_webview) {/ / determine whether webview exists

Detail_webview=plus.webview.getWebviewById ("account_detail.html")

} / / detail_webview is a preloaded page in the list page

Mui.fire (detail_webview,'account_bid_detail_fire', {id:_this.dataset.id

}); / / Open the details page

Mui.openWindow ({id: "account_detail.html", / / id of the details page webview

Show: {aniShow:'none',// pages do not show animation

Duration:'0'//

}

})

})

Next, when you click on the list on the list page, you can trigger the "account_bid_detail_fire" event of the details page, and then trigger the ajax of the details page to update the requested data.

At this point, the study on "how to optimize the mui list to jump to the details page" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.