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


Posted in jQuery onOctober 26, 2017

本文实例为大家分享了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 相关文章推荐
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
You might like
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
js 编写规范
2010/03/03 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
素质拓展感言
2014/01/29 职场文书
高一化学教学反思
2014/02/05 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
银行委托书范本
2014/04/04 职场文书
志愿者活动总结
2014/04/28 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014财务年终工作总结
2014/12/08 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
python实现剪贴板的操作
2021/07/01 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript