Dieser Artikel stellt Ihnen hauptsächlich eine Methode zur Implementierung der Iscool-Pulldown-Aktualisierungsfunktion vor (empfohlen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Einfache Pulldown-Aktualisierungsimplementierungsmethode
CSS-Stil:
*{ 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>
Bevor Sie JS-Code schreiben, müssen Sie ihn vorstellen das jQuery-Plug-in und das iscroll-Plug-in
Dann lautet der js-Code wie folgt:
//给内容添加滚动事件 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>
Damit ist eine einfache Pulldown-Aktualisierung abgeschlossen! !
Verwandte Empfehlungen:
Pull-Down-Aktualisierungs- und Pull-Up-Lademethoden des Dropload.js-Plugins
Das obige ist der detaillierte Inhalt vonIscool-Pulldown-Aktualisierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!