À propos de jquery utilisant scroll pour implémenter le chargement et l'actualisation des pull-up et pull-down

Cet article présente principalement en détail la méthode de jquery utilisant iscorll pour implémenter le chargement et l'actualisation des pull-up et pull-down. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Le principe de mise en œuvre est le suivant : juger si fiiptop et flipdown sont affichés en fonction de

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); 
          } 
 
        } 
      });

partie de page

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

Recommandations associées :

Explication détaillée de l'ajout et de la suppression d'événements onScroll dans React.Js

div Explication détaillée du code de défilement qui glisse vers le bas

L'événement onscroll qui se déclenche lorsque la barre de défilement de l'élément défile en html5

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!