Heim  >  Artikel  >  Web-Frontend  >  jquery verwendet iscroll, um das Laden und Aktualisieren von Beispielen per Pull-up und Pull-down zu implementieren

jquery verwendet iscroll, um das Laden und Aktualisieren von Beispielen per Pull-up und Pull-down zu implementieren

小云云
小云云Original
2018-01-20 14:01:371701Durchsuche

In diesem Artikel wird hauptsächlich die Methode von jquery zum Implementieren von Pull-Up- und Pull-Down-Laden und -Aktualisierung vorgestellt. Ich hoffe, dass es Ihnen helfen kann.

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code von iscorll mit, um das Laden und Aktualisieren von Pull-Ups und Pull-Downs als Referenz zu implementieren. Der spezifische Inhalt ist wie folgt:

Das Implementierungsprinzip lautet: Beurteilen Sie fiiptop, flipdown Ob als Basis angezeigt werden soll


myScroll = new iScroll('wraphome', { 
        fixedScrollbar: true, 
        hideScrollbar: true, 
        fadeScrollbar: true, 
        hScrollbar: false, 
        vScrollbar: true, 
        onScrollMove: function () { 
          var topstat = $(".fliptop").is(":visible"); 
          var downstat = $(".flipdown").is(":visible"); 
          if (this.y > 15 && !topstat && !downstat) { 
            $(".fliptop").fadeIn(300); 
          } else if (this.y < 15 && topstat) { 
            $(".fliptop").hide(); 
          } else if (this.y < (this.maxScrollY - 25) && !topstat && !downstat) { 
            $(".flipdown").fadeIn(300); 
            this.refresh(); //这里是当显示正在加载中时刷新底部位置 
          } else if (this.y > (this.maxScrollY + 25) && downstat) { 
            $(".flipdown").hide(); 
          } 
        }, 
        onTouchEnd: function () { 
          var topstat = $(".fliptop").is(":visible"); 
          var downstat = $(".flipdown").is(":visible"); 
          if (topstat && !downstat) { 
            $(".fliptop").html("正在加载中……"); 
            setTimeout(function(){ 
              //此处为你自己的逻辑方法 
            },3000); 
          } else if (downstat && !topstat) { 
            $(".flipdown").html("正在加载中……"); 
            setTimeout(function(){ 
              //此处为你自己的逻辑方法 
            },3000); 
          } 
 
        } 
      });

Seitenabschnitt


<p id="wraphome" class="scroll"> 
   <p class="scroll-inner"> 
     <p class="fliptop">松手开始加载...</p> 
     <p class="list"> 
        ............. 
     </p> 
     <p class="flipdown">松手开始加载...</p> 
   </p> 
</p>

Verwandte Empfehlungen:

Was ist iScroll? Detaillierte Erläuterung der Anwendungsbeispiele von iScroll

Iscroll-Implementierung von Pulldown- und Pullup-Refresh-Tutorials

JQuery-Plug-in iScroll implementiert Pull- Down-Refresh- und Scrolling-Seitenwechseleffekte_jquery

Das obige ist der detaillierte Inhalt vonjquery verwendet iscroll, um das Laden und Aktualisieren von Beispielen per Pull-up und Pull-down zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn