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模拟原生态App上拉刷新下拉加载更多页面及原理
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- jQuery+AJAX实现无刷新下拉加载更多
- jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
- 用Jquery实现多级下拉框无刷新的联动
- 基于jQuery Ajax实现下拉框无刷新联动
- jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
- jquery刷新页面的实现代码(局部及全页面刷新)
- 用Jquery.load载入页面实现局部刷新
- jQuery实现AJAX定时刷新局部页面实例
- JQuery+Ajax无刷新分页的实例代码
- jQuery实现的上拉刷新功能组件示例
相关文章
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
本篇文章主要介绍jQuery中MovingBoxes左右滑动放大图片插件示例,实现左右滑动和放大效果,有兴趣的可以了解一下。2017-02-02jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
本文给大家分享的是使用jQuery结合CSS3制作的仿猎豹浏览器宽屏banner焦点图特效,代码很简单,效果却非常棒,而且兼容各大浏览器,这里推荐给大家,有需要的小伙伴参考下。2015-03-03
最新评论