About jquery using scroll to implement pull-up and pull-down loading and refreshing-JS Tutorial-php.cn

About jquery using scroll to implement pull-up and pull-down loading and refreshing

小云云

Release： 2018-01-02 10:41:57

Original

1369 people have browsed it

This article mainly introduces in detail how jquery uses iscorll to implement pull-up and pull-down loading and refreshing. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The implementation principle is: judge whether fiiptop and flipdown are displayed as the basis

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

Copy after login

Page part

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

Copy after login

Related recommendations:

Detailed explanation of adding and deleting onScroll events in React.Js

div slides to the bottom Detailed explanation of scroll code

The event onscroll is triggered when the element scroll bar is scrolling in html5

The above is the detailed content of About jquery using scroll to implement pull-up and pull-down loading and refreshing. For more information, please follow other related articles on the PHP Chinese website!