iscroll.js的上拉下拉刷新时无法回弹的解决方法

 更新时间:2016年02月18日 08:46:20   作者:那时候的我  
本文给大家分享的是在IOS浏览器中使用iscroll.js的上拉下拉刷新时当手指划出屏幕后无法回弹的解决方法,希望对大家能够有所帮助。

使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面。

相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多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),页面就开始回弹。

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

相关文章

  • echarts中图例右置且竖排完整代码

    echarts中图例右置且竖排完整代码

    这篇文章主要给大家介绍了关于echarts中图例右置且竖排的相关资料,Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发,需要的朋友可以参考下
    2023-08-08
  • js split函数用法总结(从入门到精通)

    js split函数用法总结(从入门到精通)

    js split就是将一字符串以特定的字符分割成数组,数组一般是字符串处理比较常用的处理方法
    2013-03-03
  • 基于匀速运动的实例讲解(侧边栏,淡入淡出)

    基于匀速运动的实例讲解(侧边栏,淡入淡出)

    下面小编就为大家带来一篇基于匀速运动的实例讲解(侧边栏,淡入淡出)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 微信小程序获取手机号授权用户登录功能

    微信小程序获取手机号授权用户登录功能

    微信小程序中有许多地方需要用户注册用户信息的地方,用户需要填写手机号等,下面小编给大家分享微信小程序获取手机号授权用户登录功能,需要的朋友参考下吧
    2017-11-11
  • js实现坦克移动小游戏

    js实现坦克移动小游戏

    这篇文章主要为大家详细介绍了js实现坦克移动小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS合并两个数组的方法详解

    JS合并两个数组的方法详解

    这篇文章主要详细介绍了JS合并两个数组的方法,文中有详细的代码示例,对我们学习JS有一定的帮助,感兴趣的同学可以参考一下
    2023-06-06
  • js完美解决IE6不支持position:fixed的bug

    js完美解决IE6不支持position:fixed的bug

    关于IE6,虽然它已被微软抛弃很久了,但是由于大天朝的特殊行情(盗版)对于前端工程师来说,解决IE6兼容position:fixed的问题显得很重要。特别是你需要用到头尾悬停调用的时候
    2015-04-04
  • JS实现简单Tab栏切换案例

    JS实现简单Tab栏切换案例

    这篇文章主要为大家详细介绍了JS实现简单Tab栏切换案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 收集前端面试题之url、href、src

    收集前端面试题之url、href、src

    本文给大家分享小编日常收集整理的关于前端面试题之url、href、src的语法规则及基本概念,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-03-03
  • js使用generator函数同步执行ajax任务

    js使用generator函数同步执行ajax任务

    这篇文章主要为大家详细介绍了js使用generator函数同步执行ajax任务,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论