iscroll.js的上拉下拉刷新时无法回弹的解决方法
来源:互联网 发布:php是世界上最美的语言 编辑:程序博客网 时间:2024/05/16 06:28
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面。
相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助。
相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助。
上拉下拉刷新的主要代码:
myScroll = new iScroll('wrapper', { vScrollbar: false, useTransition: true, topOffset: pullDownOffset, onRefresh: function () { if (pullDownEl.className.match('loading')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; } else if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...'; } }, onScrollMove: function () { if (this.y > 5 && !pullDownEl.className.match('flip')) { pullDownEl.className = 'flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...'; this.minScrollY = 0; } else if (this.y < 5 && pullDownEl.className.match('flip')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; this.minScrollY = -pullDownOffset; } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...'; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullDownEl.className.match('flip')) { pullDownEl.className = 'loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; pullDownAction(); } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; pullUpAction(); } }});
下面解释一下这段代码的意思。
this.y是页面已经滚动的垂直距离,this.maxScrollY是最大垂直滚动距离,this.pointY手指当前的垂直坐标。
当this.y < this.maxScrollY,就是已经处于上拉的过程,当(this.y < this.maxScrollY) && (this.pointY < 1)时,处于上拉且手指已经触及屏幕边缘,这时候手动触发this.scrollTo(0, this.maxScrollY, 400),页面就开始回弹。
下拉过程也可以同理分析。
转载地址:http://www.jb51.net/article/79632.htm
【IScroll深入学习】解决IScroll疑难杂症 http://www.cnblogs.com/yexiaochai/p/3764503.html
0 0
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
- 关于iscroll滚动插件,在iOS下面,上拉之后无法回弹的问题
- 解决iscroll5的上拉下拉的回弹问题
- 最终标准的上拉下拉刷新
- PullToRefresh的实现上拉下拉刷新
- pulltorefresh上拉下拉刷新的用法
- 各种上拉下拉刷新的方法
- pulltorefreshlistview上拉下拉刷新时的标签
- 基于iscroll 5 的上拉加载下拉刷新
- iScroll上拉加载下拉刷新 -> 遇到的问题
- IOS 处理分页数据的上拉下拉刷新
- 使用SwipeToLoadLayout解决RecyclerView的上拉下拉刷新
- 上拉下拉的原理
- ListView的上拉下拉
- ListView上拉下拉刷新
- UITableView上拉下拉刷新
- Android 集成微信支付
- PhoneGap || Cordova 安装以及导入AndroidStudio 遇到的问题
- Linux的文件权限
- Hive2.1.0安装问题总结
- 队列常用方法
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- testNG学习点--零散
- Win10 asset store 资源下载资源默认保存路径
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- 各种距离
- 类成员函数返回(成员)函数指针,包装类调用外部类的成员方法
- Android6.0权限管理之开源项目Grant
- 脲甲醛肥料特性
- android沉浸式状态栏