解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
2017-03-29 11:44
771 查看
使用过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(); } } });
页面无法弹回的原因在于:手指划出屏幕后
touchend事件无法触发,回弹动画就无法执行。解决办法就是:当手指接近屏幕边缘的时候,手动触发动画方法。
在
onScrollMove方法中插入判断代码:
onScrollMove: function () { if((this.y < this.maxScrollY) && (this.pointY < 1)){ this.scrollTo(0, this.maxScrollY, 400); return; } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) { this.scrollTo(0, 0, 400); return; } ...... }
下面解释一下这段代码的意思。
this.y是页面已经滚动的垂直距离,
this.maxScrollY是最大垂直滚动距离,
this.pointY手指当前的垂直坐标。
当
this.y < this.maxScrollY,就是已经处于上拉的过程,当
(this.y < this.maxScrollY) && (this.pointY < 1)时,处于上拉且手指已经触及屏幕边缘,这时候手动触发
this.scrollTo(0, this.maxScrollY, 400),页面就开始回弹。
下拉过程也可以同理分析。
欢迎留下你的解决方法。
相关文章推荐
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- 微信浏览器页面js刷新页面代码,解决微信jquery无法刷新问题
- iscroll.js的上拉下拉刷新时无法回弹的解决方法
- 解决IDEA开发JavaWeb项目修改了HTML或Servlet/JSP后刷新浏览器无法及时显示修改后的页面的问题
- 关于angular的include指令,include的页面无法加载js问题解决
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- 解决ajax加载的页面js无法找到的问题
- vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
- js生效后页面自动刷新的问题(js控制button,生效效果闪一下消失)解决
- onclientclick事件使用JS页面会刷新问题解决
- 解决微信小程序中在其他页面无法使用app.js中获取的userInfo或openid的问题
- javaweb 常见问题-第2篇- chrom google 浏览器 调试时js无法刷新的解决方法
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- requirejs页面刷新失效js报错问题解决方案
- 页面js遇到乱码问题的解决方法是和无法转码的情况
- 页面js遇到乱码问题的解决方法是和无法转码的情况