Preface
In the previous section, there was a mobile project that needed to use pull-down refresh and pull-up loading more effects. The first reflection in my mind was the effect of Weibo. At the beginning, I had some deviations in my understanding. I thought pull-down was also an append data, and pull-up was an append data. Later, I asked my colleagues and found out that the pull-down was just a refresh of the latest data, and pull-up was an append data.
Usage Tips
1. Refer to iScroll.js and add two event listening during initialization: touchMove and DOMContentLoaded.
2. Implement the onScrollEnd event of the iScroll plug-in, that is, in this event, call your own ajax method to refresh and append data.
3. When pulling up and loading more requests in the background, it is equivalent to paging request data. At this time, the pageIndex parameter needs to be sent during ajax request, and when initializing loading, a pageCount needs to be returned from the background for the foreground to judge.
4. The most important thing is to implement the pulldown refresh method (pullDownAction) and pullup load more (pullUpAction) method.
Running effect diagram
Implementation method
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;/** * Pull-down refresh (customize this method) * myScroll.refresh(); After the data is loaded, call the interface update method */function pullDownAction () { setTimeout(function () { var el, li, i; el = document.getElementById('thelist'); for (i=0; i<3; i++) { li = document.createElement('li'); li.innerText = 'Generated row ' + (++generatedCount); el.insertBefore(li, el.childNodes[0]); } myScroll.refresh(); //After data loading, call the interface update method}, 1000); }/** * Scroll and turn pages (customize this method) * myScroll.refresh(); // After data loading, call the interface update method*/function pullUpAction () { setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! var el, li, i; el = document.getElementById('thelist'); for (i=0; i<3; i++) { li = document.createElement('li'); li.innerText = 'Generated row ' + (++generatedCount); el.appendChild(li, el.childNodes[0]); } myScroll.refresh(); //After the data is loaded, call the interface update method}, 1000); }/** * Initialize the iScroll control*/function loaded() { pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight; myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar', useTransition: false, topOffset: pullDownOffset, onRefresh: function () { if (pullDownEl.className.match('loading')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pulldown refresh...'; } else if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pullup Load More...'; } }, onScrollMove: function () { if (this.y > 5 && !pulDownEl.className.match('flip')) { pullDownEl.className = 'flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Save it down to update...'; this.minScrollY = 0; } else if (this.y < 5 && pullDownEl.className.match('flip')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'drop-down refresh...'; this.minScrollY = -pullDownOffset; } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Save it aside and start updating...'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'pull load more...'; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullDownEl.className.match('flip')) { pullDownEl.className = 'loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; pullDownAction(); // ajax call } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; pullUpAction(); // ajax call } } }); setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}//Initialize the binding iScroll control document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', loaded, false);Summarize
The main thing is to do some initialization operations on iScroll, display different prompt information for different actions, and then write corresponding refresh and load more processing methods for pull-down and pull-up events.