解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
博客已迁移至http://zlwis.me。
使用过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)
,页面就开始回弹。
下拉过程也可以同理分析。
欢迎留下你的解决方法。
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题的更多相关文章
- 打造Android万能上拉下拉刷新框架--XRefreshView(三)
转载请注明出处:http://blog.csdn.net/footballclub/ 打造Android万能上拉下拉刷新框架–XRefreshView(一) 打造Android万能上拉下拉刷新框架–X ...
- iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)
一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...
- 打造android万能上拉下拉刷新框架——XRefreshView (二)
打造Android万能上拉下拉刷新框架--XRefreshView(一) 打造Android万能上拉下拉刷新框架--XRefreshView(三) 一.前言 自从上次发表了打造android万能上拉下 ...
- 练习使用XRecyclerView,可上拉下拉刷新。
package com.lixu.testxrecyclerview; import android.support.v7.app.AppCompatActivity; import android. ...
- swift实现UItableview上拉下拉刷新模块
最近用写个项目 发现上拉下拉刷新模块没找到合适的 so 自己写了一个 由于最近忙 教程就不写了 里面有 直接贴地址https://github.com/DaChengTechnology/DCRefr ...
- 基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
- ListView实现上拉下拉刷新加载功能
第一步.首先在你项目中创建一个包存放支持下拉刷新和上拉加载的类:
- iOS 上拉下拉刷新简单实现代码
一般说到上拉刷新下拉刷新,很多人可能想到的是一个第三方开源框架EGORefresh,下面说下,如何自己写代码实现. UITableView本身是一个UIScrollView,所以UITableView ...
- android118 上拉下拉刷新列表listView实现
MainActivity.java package com.heima52.pullrefresh; import java.util.ArrayList; import com.heima52.pu ...
随机推荐
- P2327 [SCOI2005]扫雷
题目描述 输入输出格式 输入格式: 第一行为N,第二行有N个数,依次为第二列的格子中的数.(1<= N <= 10000) 输出格式: 一个数,即第一列中雷的摆放方案数. 输入输出样例 输 ...
- 认识BPM
什么是BPM BPM,即业务流程管理,是一种以规范化的构造端到端的卓越业务流程为中心,以持续的提高组织业务绩效为目的的系统化方法,常见商业管理教育如EMBA.MBA等均将BPM包含在内. BPM能干什 ...
- Linux学习笔记(第五章)
第五章-常用指令 下达指令: 1.[Tab] 2.man + (指令):显示操作说明 开头代号 man page 常用按键
- float浮动的一些基础常识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 新版u-boot移植到s3c2440开发板(一)--建立单板
由于没有系统的学习shell,所以Makefile大多数看不懂,一个小小的细节,把我难住了几天.现在开始分享我的操作过程 本文所有linux下的操作是root用户,如果你使用普通用户,请在命令前加上 ...
- PTA-BinarySearchTree BasicOperation
/* 二叉查找树 基本操作 */#include <stdio.h> #include <stdlib.h> typedef int ElementType; typedef ...
- docker 设置映射端口 目录挂载
docker run -p 3092:9092 -p 3093:9093 -p 3094:9094 -p 3181:2181 --name="kafka_map_port_3092_4_31 ...
- 柯朗微积分与数学分析习题选解(1.1 节 e)
一直在读<陶哲轩实分析>,陶的书非常的严谨,环环相扣,但是也有个缺点就是计算性的例子和应用方面的例子太少了.所以就又找了本柯朗的<微积分与数学分析>搭配着看.柯朗的书的习题与陶 ...
- loj558 「Antileaf's Round」我们的CPU遭到攻击
考完了可以发题解了. 做法是link-cut tree维护子树信息,并不需要维护黑树白树那些的. 下面是一条重链: 如果4是根的话,那么在splay上是这样的: 在splay中,子树的信息都已经计算完 ...
- P4438 [HNOI/AHOI2018]道路
辣稽题目 毁我青春 耗我钱财. 设\(f[x][i][j]\)为从1号点走到x点经过i条公路j条铁路,子树的最小代价. \(f[leaf][i][j]=(A+i)(B+j)C\) \(f[x][i][ ...