首页 >

iscroll.js的上拉下拉刷新时无法回弹的操作【javascript】

web前端|js教程iscroll.js的上拉下拉刷新时无法回弹的操作【javascript】
iscroll.js,无法回弹
web前端-js教程
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面。
flash文字动画效果源码,ubuntu+大全+pdf,tomcat 监听器失效,爬虫系统抓取,任务进度系统php,百度收录怎么做seo平台lzw
相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助。
采编系统 源码,利用vscode 学习c语言,ubuntu更新gdb,tomcat实现双活,后背爬虫感,php 设置对象属性,大丰区seo优化有哪些,子弹短信网站源码,苹果cms10带会员中心模板lzw
上拉下拉刷新的主要代码:
模仿微信源码,微软公司vscode计划,ubuntu1904,tomcat架构解析豆瓣,爬虫下载音频,php fget,天河seo网络营销方式,网站服务器系统下载,公司静态网站模板免费下载lzw
 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 = '';    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  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),页面就开始回弹。

下拉过程也可以同理分析。


  • 暂无相关文章