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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
纯js实现倒计时功能
Jan 06 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
PHP Directory 函数的详解
2013/03/07 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python实现求数列和的方法示例
2018/01/12 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python django model联合主键的例子
2019/08/06 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
运动会通讯稿100字
2014/01/31 职场文书
运动会方阵解说词
2014/02/12 职场文书
无犯罪记录证明
2014/09/19 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android
数据设计之权限的实现
2022/08/05 MySQL
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL