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


Posted in Javascript onFebruary 18, 2016

使用过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),页面就开始回弹。

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

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
javascript每日必学之条件分支
Feb 17 #Javascript
JavaScipt中栈的实现方法
Feb 17 #Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 #Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 #Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 #Javascript
Bootstrap入门书籍之(一)排版
Feb 17 #Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 #Javascript
You might like
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python实现批量图片格式转换
2020/06/16 Python
python 检查文件mime类型的方法
2018/12/08 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
python实现双人五子棋(终端版)
2020/12/30 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
公司拓展活动方案
2014/02/13 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python