位置: 编程技术 - 正文
推荐整理分享iscroll.js的上拉下拉刷新时无法回弹的解决方法(isscroll.js),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:isscroll.js,js上拉加载,scroll-view上拉加载,isscroll.js,js实现上拉加载,scroll-view上拉加载,js实现上拉加载,js实现上拉加载,内容如对您有帮助,希望把文章链接给更多的朋友!
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面。
相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助。
上拉下拉刷新的主要代码:
页面无法弹回的原因在于:手指划出屏幕后touchend事件无法触发,回弹动画就无法执行。解决办法就是:当手指接近屏幕边缘的时候,手动触发动画方法。
在onScrollMove方法中插入判断代码:
下面解释一下这段代码的意思。
this.y是页面已经滚动的垂直距离,this.maxScrollY是最大垂直滚动距离,this.pointY手指当前的垂直坐标。
当this.y < this.maxScrollY,就是已经处于上拉的过程,当(this.y < this.maxScrollY) && (this.pointY < 1)时,处于上拉且手指已经触及屏幕边缘,这时候手动触发this.scrollTo(0, this.maxScrollY, ),页面就开始回弹。
下拉过程也可以同理分析。
javascript结合Flexbox简单实现滑动拼图游戏 滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。要实现一个拼图游戏,需要考虑怎样随机的打乱顺序
JavaScript+canvas实现七色板效果实例 本文实例讲述了JavaScript+canvas实现七色板效果。分享给大家供大家参考,具体如下:效果图如下:html:canvasid="canvas"class="canvas"width=""height=""/canvascss
XML、HTML、CSS与JS的区别整理 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会。首次,我们看一下这四项技术都是什么,能干
标签: isscroll.js
本文链接地址:https://www.jiuchutong.com/biancheng/380374.html 转载请保留说明!友情链接: 武汉网站建设