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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
详解node.js 事件循环
Jul 22 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
使用图灵api创建微信聊天机器人
2015/07/23 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python实现的购物车功能示例
2018/02/11 Python
Python3实现购物车功能
2018/04/18 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
如何实现一个自定义类的序列化
2012/05/22 面试题
化学专业毕业生求职信
2014/07/28 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
离职证明标准格式
2014/09/15 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏
教你如何用cmd快速登录服务器
2022/06/10 Servers