iScroll Pull-Up Loading and Pull-Down Refresh

Note: This plugin must run in a server environment. Previewing it locally will cause cross-origin issues!

Usage

1. The AJAX section uses local data written by me.

2. You can also comment out the AJAX section, //sumL = \ndata.body.totalNum; and comment out this line of code. Then assign a numeric value to the variable sumL=n above to specify the length of the returned data for display.

3. The method for refreshing the scroll bar was added manually. After page initialization (after requesting data via AJAX and adding it to the page, iScroll cannot detect the scroll bar position, which causes the page to become locked. When you try to scroll upward, the page will not move. Therefore, calling the scroll bar height refresh method after adding data solves this problem.)

4. A check was added inside loaded to determine whether all data has finished loading.

5. Pull-down refresh: The original default behavior was to refresh the scroll bar height. This was later changed to refresh the entire page and add a random number to clear the cache, similar to pressing F5. (There is one issue here: when the page display area, namely the scrolling area, is shorter than a certain height, triggering pull-down refresh also triggers pull-up loading. When the area is taller than that height, pull-up loading is not triggered. Since pull-down refresh is now configured to reload the entire page (pull-up loading still works normally), I simply made it refresh the entire page. If anyone has a good solution for the minimum height issue, feel free to leave a comment.)

6. Adding Data (You can implement the data insertion method yourself. I request all the data at once, store it locally, and then add the required number of items each time. Alternatively, you can request data from the API every time pull-up loading is triggered and add it after the request completes.)

7. You can include a minified version of the iScroll JavaScript file in your page (only 4 KB after compression).