Iscroll Mobile Pull-up refresh drop-down loading instance!

Iscroll.js is a mobile end frame, I believe that mobile students have contact bar, haha,

Share the usage below and first introduce the iscroll.js path in your head to modify it yourself

<script src= "Iscroll.js" ></script>

Well, after the introduction, it's time to come up with something real.

First you build your HTML structure: as the following code, the object of the motion is your ID is wrapper under the first sub-element , no way who call you use the frame it. Of course, students can also expand their own

After JS, build the structure and then post the following script.

function loaded () {Pulldownel = document.getElementById (' PullDown ');p ulldownoffset = pulldownel.offsetheight; Pullupel = document.getElementById (' pullup ');p ullupoffset = Pullupel.offsetheight;myscroll = new IScroll (' wrapper ', { Usetransition:true,topoffset:pulldownoffset,onrefresh:function () {if (PullDownEl.className.match (' loading ')) { Pulldownel.classname = ";p ulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' drop-down refresh ';} else if (pullUpEl.className.match (' loading ')) {pullupel.classname = ';p ullupel.queryselector ('. Pulluplabel '). InnerHTML = ' pull load more ';}},onscrollmove:function () {if (This.y > 5 &&!pulldownel.classname.match (' Flip ')) {Pul Ldownel.classname = ' Flip ';p ulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' release refresh '; 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-10) &&!pullupel.classname.match (' Flip ') {pullupel.classname = ' flip ';p ullupel.queryselector ('. Pulluplabel '). InnerHTML = ' release refresh '; this.maxscrolly = this.maxscrolly;} else if (This.y > (this.maxscrolly +) && pullUpEl.className.match (' Flip ')) {pullupel.classname = ';p ullupe L.queryselector ('. Pulluplabel '). InnerHTML = ' Pull up load more '; this.maxscrolly = Pullupoffset;}},onscrollend:function () {if ( PullDownEl.className.match (' Flip ')) {pulldownel.classname = ' loading ';p ulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Load ';p ulldownaction ();//Execute Custom Function (Ajax call?)} else if (pullUpEl.className.match (' Flip ')) {pullupel.classname = ' loading ';p ullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Load ';p ullupaction ();//Execute Custom Function (Ajax Call)}}); SetTimeout (function () {document.getElementById (' wrapper '). Style.left = ' 0 ';}, 800);} Document.addeventlistener (' Touchmove ', function (e) {E.preventdefault ();}, False);d Ocument.addeventlistener (' DOMContentloaded ', function () {SetTimeout (loaded, $);}, False); 

When you're ready

It should be executed.

function Pulldownaction () {//drop-down refresh window.location.reload ();} var i = 2; Initialize the page number to 2function pullupaction () {Pull load more var page = i++;//Add one page at a time (i.e. next page next page) Ajax (page);//Run Ajax and pass 2 over to the backstage. To add a page of data (of course, this specific transmission to the background to cooperate with) Myscroll.refresh ();//<--Simulate network congestion, remove SetTimeout from production!} function Ajax (page) {//Ajax background interaction $.ajax ({type: "Post", DataType: "JSON", url: "/installerajax",//The address you requested is data: {' page ':  Page//Pass past page number}, Success:function (data) {data = eval (data.clientlist), if (data.length) {///If the background has data to perform the following operations, do not execute else Tell the user there is no more content for (Var i=0; i< (DATA.LENGTH/2); i++) {//Here for your own code do not copy, manipulate your own back-end data var olis = "<li><a href="/A Pps/clientcase?clientid= "+data[i+i].id+" ' class= ' left ' ><p class= ' Jsyh_logo ' ></p><div class= ' text ' ><p> ' + data[i+i].clientname + ' </p><span class= ' Blue_icon ' > ' +data[i+i].number+ ' </span></div></a>&Lt;a href= '/apps/clientcase?clientid= "+data[i+i+1].id+" ' class= ' left ' ><p class= ' Jsyh_logo ' ></p><div class= ' text ' ><p>" + data[i+i+1]. ClientName + "</p><span class= ' Blue_icon ' >" +data[i+i+1].number+ "</span></div></a> </li> "; $ (' Ul.customer '). Append (Olis);}} else{$ ('. Pulluplabel '). HTML (' Pro, no more content! ‘);} },error:function () {}});}

Recommended pages do not use a lot of iscroll, too much performance

Iscroll Mobile Pull-up refresh drop-down loading instance!