Maison >interface Web >js tutoriel >Méthode d'implémentation de l'actualisation déroulante Iscool
Cet article vous apporte principalement une méthode pour implémenter la fonction de rafraîchissement déroulant Iscool (recommandé). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Méthode d'implémentation d'actualisation déroulante simple
Style CSS :
*{ margin: 0px; padding: 0px; } #wrapper{ width: 100%; height: 150px; border: 1px solid red; overflow: hidden; position: absolute; } #shua{ text-align: center; }
Code HTML
<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>
Avant d'écrire du code js, vous devez introduire le plug-in jQuery et le plug-in iscroll
Ensuite, le code js est le suivant :
//给内容添加滚动事件 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>
Ceci complète un simple rafraîchissement déroulant ! !
Recommandations associées :
Méthodes d'actualisation du plugin dropload.js et de chargement des pull-up
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!