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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JQuery animate动画应用示例
May 14 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
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
简述php环境搭建与配置
2016/12/05 PHP
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
layui分页效果实现代码
2017/05/19 Javascript
vue router demo详解
2017/10/13 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
vue中v-model的应用及使用详解
2018/06/27 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
python之yield表达式学习
2014/09/02 Python
Python map和reduce函数用法示例
2015/02/26 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python与字符编码问题
2019/05/24 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
物业管理求职自荐信
2013/09/25 职场文书
个人自我剖析材料
2014/02/07 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle