Home > Article > Web Front-end > Iscool pull-down refresh implementation method
This article mainly brings you a method to implement the Iscool pull-down refresh function (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
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
<p id="wrapper"> <p> <p id="shua">刷新</p> <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> </p> </p>
Before writing js code, you must introduce the jQuery plug-in and iscroll plug-in
Then the js code is as follows:
//给内容添加滚动事件 var a=new IScroll("#wrapper",{ scrollbars:true, mouseWheel:true, interactiveScrollbars:true, // scrollX:true, // freeScroll:true, probeType:2, }) //让文字先隐藏 $("#shua").hide(); var x=0; a.on("scroll",function(){ if(x==0){ if(this.y>40){ $("#shua").show(); $("#shua").text("松开手进行刷新") x=1; } a.on("scrollEnd",function(){ if(x==1){ $("#shua").text("正在刷新") setTimeout(shuju,1000) x=2; } }) var z=0; function shuju(){ if(x==2){ $("#shua").hide(); $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++)) a.refresh() x=0; } } } }) </script>
This completes a simple pull-down refresh! !
Related recommendations:
dropload.js plug-in pull-down refresh and pull-up loading methods
Analysis of implementation method of pull-down refresh and pull-up loading of WeChat applet list
The above is the detailed content of Iscool pull-down refresh implementation method. For more information, please follow other related articles on the PHP Chinese website!