jquery使用iscorll实现上拉、下拉加载刷新

 更新时间:2017年10月26日 16:11:43   作者:飞奔的猫  
这篇文章主要为大家详细介绍了jquery使用iscorll实现上拉、下拉加载刷新的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码,供大家参考,具体内容如下

实现原理是:判断fiiptop,flipdown是否显示为依据

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

页面部分

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jQuery控制TR显示隐藏的几种方法

    jQuery控制TR显示隐藏的几种方法

    使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,其他方法祥看本文
    2014-06-06
  • jQuery实现菜单栏导航效果

    jQuery实现菜单栏导航效果

    这篇文章主要为大家详细介绍了jQuery实现简单菜单栏导航效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jquery根据属性和index来查找属性值并操作

    jquery根据属性和index来查找属性值并操作

    这篇文章主要介绍了jquery如何根据属性和index来查找属性值并操作,需要的朋友可以参考下
    2014-07-07
  • 使用veloticy-ui生成文字动画效果

    使用veloticy-ui生成文字动画效果

    这篇文章主要介绍了使用veloticy-ui生成文字动画效果及基本使用方法,需要的朋友可以参考下
    2018-02-02
  • jquery CSS选择器笔记

    jquery CSS选择器笔记

    今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。
    2010-03-03
  • 使用jQuery+EasyUI实现CheckBoxTree的级联选中特效

    使用jQuery+EasyUI实现CheckBoxTree的级联选中特效

    这篇文章主要介绍了使用jQuery+EasyUI实现CheckBoxTree的级联选中特效的相关资料,需要的朋友可以参考下
    2015-12-12
  • 自己动手实现jQuery Callbacks完整功能代码详解

    自己动手实现jQuery Callbacks完整功能代码详解

    最近大量的用到jQuery Callbacks 对象,jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现,下面我们也模拟实现jQuery Callbacks 对象的部分功能
    2013-11-11
  • ASP SQL防注入的方法

    ASP SQL防注入的方法

    前一篇我们介绍了一种防SQL注入的终极方法,也就是最原始、最简单、最有效也是最通用的方法,就是数据类型的检查加单引号的处理,具体的内容前面一篇已经介绍过了,这里我就不重复了
    2008-12-12
  • jQuery创建自己的插件(自定义插件)的方法

    jQuery创建自己的插件(自定义插件)的方法

    在该系列之前的文章使用 jQuery:UI 项目中,我介绍了使用 jQuery 代码中的插件来提高 web 应用程序的效率。
    2010-06-06
  • 浅析bootstrap原理及优缺点

    浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统
    2017-03-03

最新评论