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+pjax简单示例汇总
Apr 21 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python实现AES加密与解密
2019/03/28 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
小学运动会报道稿
2015/07/22 职场文书
安全生产标语口号
2015/12/26 职场文书
安全学习心得体会范文
2016/01/18 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Node与Python 双向通信的实现代码
2021/07/16 Javascript
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL