Mui scrollTo to the specified location. The problem is solved when blank pages and cannot be pulled. muiscrollto

Mui scrollTo to the specified location. The problem is solved when blank pages and cannot be pulled. muiscrollto

Usage Overview

The mui list page uses the mui plug-in to implement pull-up and pull-down refresh. However, when you return from the details page to the List page, you cannot return to the previous position. So I thought of using the cache.

 

The first and second experiments failed. After the failure, you want to use other methods to solve the problem. Therefore, we tested WeUi + mui, WeUI + listloading. js and WeUi.

It is found that there are different problems. The WeUI redirection method adopts the same page Jump anchor link method. This method can actually solve the problem.

However, I found that this is too cumbersome. A page contains too many Code and is too messy to maintain. The same HTML file contains multiple pages,

It is prone to style conflicts and js conflicts. So I pass it out.

 

Then, the gun head is redeployed to solve the problem from the source mui. After one day of debugging and testing, the first two failures were added. Finally, we found a solution.

The first step is to store the data in an Array set when the data is displayed on the page. When you want to jump to the details page

(The method for obtaining the Y axis of mui-scrollTo isMui ('. mui-scroll-wrapper'). pullRefresh (). yThe number of pages and query conditions are stored in sessionStorage.

 

The Code is as follows:

// Because mui disables a tag redirection by default, you can only perform this operation.
Mui ('body '). on ('tap', 'A', function () {if(this.tar get = "_ blank") {// console. log ("itemContent =" + $ ("# item1curpage "). val (); sessionStorage. setItem ("item-content", JSON. stringify (itemContent); // list data cache sessionStorage. setItem ("domestic_ship-y", mui ('. mui-scroll-wrapper '). pullRefresh (). y); // The rolling position sessionStorage. setItem ("item1curpage", $ ("# item1curpage "). val (); // Number of split pages sessionStorage. setItem ("form-div", $ ("# fo Rm-div ").html (); // other related data. Var url = this. href; mui. openWindow ({url: url });}});

The second step is to retrieve the cached data when you return to the List page again. The Code is as follows:

Var itemContent = new Array (); // set of data stored var item1curpage = 0; // number of page pages var domesticShipForm = null; // query condition var mask = null; mask = mui. showLoading ("", "div"); $ (function () {// obtain the cached query condition domesticShipForm = sessionStorage. getItem ("domesticShipForm"); // Add the paging query condition if (domesticShipForm! = Null & domesticShipForm! = "") {DomesticShipForm = domesticShipForm + "& curpage ="} else {domesticShipForm = "curpage ="} console. log ("domesticShipForm =" + domesticShipForm); // obtain the cached data to determine whether the cached data exists. If the cached data does not exist, load the new data. If the cached data exists, load the cached data. Var item = JSON. parse (sessionStorage. getItem ('item-content'); // sessionStorage. getItem ("item-content"); if (item = null | item = "") {$ ("# form-div" ).css ("display ", "none"); mui. ajax ({url: domesticShip. URL. queryListData (), data: domesticShipForm + $ ("# item1curpage "). val (), // $ ("# domesticShipForm "). serialize () async: true, // true asynchronous, synchronous ype: 'json', type: 'post', timeout: 10000, success: function (da Ta) {// request successful if (data. flag) {// judge whether the return value is normal domesticShip. fun. loopShowData (data. data. pshipList); // The data is displayed through the template mui. hideLoading (mask);} else {mui. toast ('request data exception occurred ') ;}, error: function (xhr, type, errorThrown) {// request failed mui. toast ('request Data Exception '); mui. hideLoading (mask); // hide the loading box});} else {// obtain the previously cached html code and display it on the page, because this project uses the i18n language switching function, // and i18n takes some loading time, so I have to cache them. In this way, you do not have to wait for the i18n language switching time. Var formDIv = sessionStorage. getItem ("form-div"); $ ("# form-div" ).html (formDIv ); // assign a value to the specified html // display the cached data to demonstrate the data retrieved from the cache in domesticShip. fun. loopShowData (item); // obtain the page number. item1curpage = sessionStorage. getItem ("item1curpage"); if (item1curpage! = 0 & item1curpage! = Null) {$ ("# item1curpage "). val (sessionStorage. getItem ("item1curpage"); // paginated value} else {$ ("# item1curpage "). val ("0"); // value item1curpage = 0;} // console. log ("item1curpage1 =" + sessionStorage. getItem ("item1curpage"); var y = sessionStorage. getItem ("domestic_ship-y"); // get the scroll position of the previous cache // determine whether the scroll position is consistent with the current scroll position if (y! = Null & y! = ''& Y! = Mui ('. mui-scroll-wrapper'). pullRefresh (). y) {// set the timer to reserve the data loading time, and then scroll after the data is loaded. // The execution sequence is sequential. The data loading is executed first and then the scrolling is executed. Therefore, you do not need to set a long time setTimeout (function () {// a big pitfall, the Y-axis data obtained from the cache must be converted to the int type. // There is no error prompt when the conversion type is not strong, but the page will fail to scroll and the blank page will appear. So this problem has been found for a long time mui ('. mui-scroll-wrapper '). pullRefresh (). scrollTo (0, parseInt (y), 20); mui. hideLoading (mask); // hide a loading box}, 110);} else {mui. hideLoading (mask); // hide the loading box }}})

 

There were probably two problems before:

　　1.I used to cache html pages.

　　2.I didn't think of a scroll bar.YThe axis must be strongly converted to the int type (pitfall)

 

In fact, after data implementation, I also thought about and queried the expiration time and storage size of sessionStorage.

　　Expiration time:I checked a lot of information on the Internet, saying that only the sessionStorage of the currently accessed page will be closed, and the expiration problem basically does not exist. Because the page is always switched,

The page is closed, and the request is re-opened. Therefore, no cache is required.

Storage size:Speak

I have also tested it myself, although I have not tested that much data. More than 30 pages. I think the size should be fine.

2621440 bytes equals 2.5 mb, 2.5 mb, and how many words can be stored? A rough calculation is about million.

A piece of information is 150 words, which is equivalent to storing 1 million pieces of information. The sum of 1000 words is divided into 10 (the number of pages is generally 10) = pages.

I believe that in general, it cannot be used so much.

 

Some daily office functions can still be adapted. After all, if you want to find the information, you must know the keyword or something.

If there is so much data. You have to find another method.

 

In addition, the problem of re-assignment has been tested.

SessionStorage. setItem ("item1curpage", "10"); If you assign a value again, the previous value is replaced.

 

 This blog is original and cannot be reproduced without permission. Thank you.

Link: http://www.cnblogs.com/richard-ju/p/L2018002.html

Demo: http://www.nsnxg.cn/jushr/share/html/mui-scrollTo.html

Demo: http://www.nsnxg.cn/jushr/share/html/download? Code = L2018002