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

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

小云云

Libérer： 2018-01-02 10:41:57

original

1492 Les gens l'ont consulté

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(&#39;wraphome&#39;, { 
        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); 
          } 
 
        } 
      });

Copier après la connexion

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>

Copier après la connexion

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!