Based on HTML5 use Iscroll to implement Drop-down refresh, pull load more _javascript tips

Objective

The previous section has a mobile phone side of the project needs to use the drop-and-pull load more effect, the first reflection of the mind is micro-bo that effect, the beginning of the understanding of some deviations, think that the drop is also appended data, pull is also appended data, after consulting colleagues found that in fact the dropdown just refresh the latest data, pull is appended data.

Use Tips

1, reference Iscroll.js, in the initialization of the addition of two event monitoring: Touchmove, domcontentloaded.

2, the implementation of the Iscroll plug-in Onscrollend event, that is, in this event call your own Ajax method to achieve data refresh and append.

3, pull load more requests in the background is equivalent to paging request data, this time need to send pageindex parameters when the AJAX request, and initialization of the load need to return from the background of a pagecount so that the foreground judge.

4, the most critical is to implement the Drop-down Refresh method (Pulldownaction) and the pull load more (Pullupaction) method.

Run Effect chart

Implementation methods

var myscroll, Pulldownel, Pulldownoffset, Pullupel, pullupoffset, generatedcount = 0; /** * Drop-down Refresh (custom implementation of this method) * Myscroll.refresh ();
 After data loading completes, call 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 the data loading is completed, invoke the interface Update method}, 1000; /** * Scrolling page (custom implementation of this method) * Myscroll.refresh ();  After data loading completes, call 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 loading is completed, invoke the interface Update method}, 1000; }/** * Initialize 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 = ' drop-down refresh ... ';
 else if (pullUpEl.className.match (' loading ')) {pullupel.classname = ';
 Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' pull loading more ... ' }, Onscrollmove:function () {if (This.y > 5 &&!pulldownel.classname.match (' Flip ') {PULLDOWNEL.CLASSN
 ame = ' Flip ';
 Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Let go of the update ... ';
 this.minscrolly = 0;
 else if (This.y < 5 && pullDownEl.className.match (' Flip ')) {pulldownel.classname = '; Pulldownel.queryselector ('. Pulldownlabel ').nerhtml = ' Drop-down refresh ... ';
 this.minscrolly =-pulldownoffset; 
 else if (This.y < (this.maxscrolly-5) &&!pullupel.classname.match (' Flip ')) {pullupel.classname = ' flip ';
 Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Let go of the update ... ';
 this.maxscrolly = this.maxscrolly;
 else if (This.y > (this.maxscrolly + 5) && pullUpEl.className.match (' Flip ')) {pullupel.classname = ';
 Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' pull loading 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 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 of the iscroll, for different actions to display different information, and then for the Drop-down and pull events to write a corresponding refresh and load more processing methods can be.