Simple pull-down refresh implementation method
CSS style:
*{ margin: 0px; padding: 0px; } #wrapper{ width: 100%; height: 150px; border: 1px solid red; overflow: hidden; position: absolute; } #shua{ text-align: center; }
HTML code
<div > <div> <div >refresh</div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div>
Before writing js code, you need to introduce jQuery plug-in and iscroll plug-in
Then the js code is as follows:
<script type="text/javascript">
//Add scrolling events to the content var a=new IScroll("#wrapper",{ scrollbars:true, mouseWheel:true, interactiveScrollbars:true, // scrollX:true, // freeScroll:true, probeType:2, }) //Let the text hide first $("#shua").hide(); var x=0; ("scroll",function(){ if(x==0){ if(>40){ $("#shua").show(); $("#shua").text("Refresh with your hand") x=1; } ("scrollEnd",function(){ if(x==1){ $("#shua").text("Refreshing") setTimeout(shuju,1000) x=2; } }) var z=0; function shuju(){ if(x==2){ $("#shua").hide(); $("ul>li:nth-child(1)").before($("<li></li>").text("data"+ z++)) () x=0; } } } }) </script>
This completes a simple drop-down refresh! !
The above Iscrool pull-down refresh function implementation method (recommended) is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.