1. Overview of components
Based on the jQuery WeUi mobile phone scrolling paging component, it can pull up the next page data and pull down the latest data. Compared with the commonly used mobile-side paging components on the Internet (such as iscroll.js), the main advantages are as follows:
1. The use is very simple, the learning cost is very low, and one line of js code can complete the front-end code writing
2. After the list is clicked to enter the details, the data before entering the details and the scrolling position can be retained when returning to the list. This is the most important advantage and the motivation for writing this component at the time.
Second, the realization of ideas
1. Based on jQuery WeUi support, realize the binding of list pull-up and pull-down events;
2. Adopt H5 sessionStorage cache support, cache loaded data, current page, total number of pages;
3. The list page has a timestamp hidden field. Using the timestamp of this hidden field as the key of sessionStorage, it is possible to directly enter the list or return to the entry list.
3. Expectations for components
The project is open source on github: https://github.com/zeliangmo/scroll-grid
1. The quality of my front-end code writing is not very high, I hope everyone can participate in the refactoring of the code;
2. It is hoped that Daniel's participation in the monitoring of pull-down and pull-up events can be implemented in this plug-in, and it will become a mobile phone-side paging plug-in that can run independently to solve common problems in mobile development;
3. Components can extend more functions.
4. Instructions for use
Use this component to import js and css related to jQuery WeUi, and at the same time, import scroll-grid.js to write the following code to complete the component call.
$('#list').srollGrid({
url:'demoList.action'
});
Code description (for more parameters, please check the source code):
1. "#list" is the container for displaying the list
2.url: The request is a list data url