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带箭头提示框tooltips插件集锦

    jQuery带箭头提示框tooltips插件集锦

    这里给大家推荐几款比较好用实用易用的jQuery带箭头提示框tooltips插件,兼容性都很不错,大家根据需要自由选择吧
    2014-11-11
  • jQuery实现滚动切换的tab选项卡效果代码

    jQuery实现滚动切换的tab选项卡效果代码

    这篇文章主要介绍了jQuery实现滚动切换的tab选项卡效果代码,涉及jquery链式操作及样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery Chart图表制作组件Highcharts用法详解

    jQuery Chart图表制作组件Highcharts用法详解

    这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下
    2016-06-06
  • jQuery检测鼠标左键和右键点击的方法

    jQuery检测鼠标左键和右键点击的方法

    这篇文章主要介绍了jQuery检测鼠标左键和右键点击的方法,涉及jQuery操作鼠标事件的技巧,且针对IE浏览器具备良好的兼容性,需要的朋友可以参考下
    2015-03-03
  • jQuery实现高级检索功能

    jQuery实现高级检索功能

    这篇文章主要为大家详细介绍了jQuery实现高级检索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • jQuery中addClass()方法用法实例

    jQuery中addClass()方法用法实例

    这篇文章主要介绍了jQuery中addClass()方法用法,实例分析了addClass()方法的功能、定义及向匹配元素添加一个或多个类的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery更改元素属性attr()方法操作示例

    jquery更改元素属性attr()方法操作示例

    这篇文章主要介绍了jquery更改元素属性attr()方法,结合实例形式简单分析了jquery更改元素属性attr()方法基本功能、语法及相关使用技巧,需要的朋友可以参考下
    2020-05-05
  • jQuery simpleModal插件的使用介绍

    jQuery simpleModal插件的使用介绍

    SimpleModal是一个轻量级的jQuery插件,它提供了一个模式对话框发展强大的接口。这篇文章主要介绍了jQuery simpleModal插件的使用,非常不错,具有参考借鉴价值,对jquery simplemodal相关知识感兴趣的朋友一起学习吧
    2016-08-08
  • servlet+jquery实现文件上传进度条示例代码

    servlet+jquery实现文件上传进度条示例代码

    现在文件的上传,特别是大文件上传,都需要进度条。这篇文章主要介绍了servlet+jquery实现文件上传进度条示例代码,有兴趣的可以了解一下。
    2017-01-01
  • jquery ajax的success回调函数中实现按钮置灰倒计时

    jquery ajax的success回调函数中实现按钮置灰倒计时

    实现异步手机发送短信成功之后在ajax的success回调中实现将发送按钮置灰并倒计时,具体的实现示例如下,喜欢的朋友可以研究下
    2013-11-11

最新评论