&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！基于iscroll实现下拉和上拉刷新（优化） - 推酷
基于iscroll实现下拉和上拉刷新（优化）
传入参数介绍
传入的参数格式，参考自
的初始化格式，所以，传入一个参数
，用来表示，需要初始化的区域
，额外传入一个对象
，用于保存一些配置参数。
的大多数参数，是
的参数，所以，如果想要查看更详细的参数设置，请参考：
为了能完成本插件的功能，额外的添加了以下的参数：
下拉刷新被触发时，执行的回调函数。
内部this指向XMSScrollFrame的实例
传入一个参数为下拉时，展示下拉动作的DIV的Zepto对象
上拉刷新被触发时，执行的回调函数。
内部this指向XMSScrollFrame的实例
传入一个参数为上拉时，展示上拉动作的DIV的Zepto对象
downStatus
设置下拉功能的状态。
默认值为true，表示下拉功能打开
如果不需要下拉功能，那么把该值设置为false
设置上拉功能的状态。
默认值为true，表示上拉功能打开
如果不需要上拉功能，那么把该值设置为false
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法 - 维维软件园
iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法
来源：本站整理作者：佚名时间： 8:54:25(0)
相信只要使用过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 = -pullDownO
} 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 = pullUpO
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);
} else if (this.y & 0 && (this.pointY & window.innerHeight - 1)) {
this.scrollTo(0, 0, 400);
下面为大家来解释一下这段代码的意思。
this.y是页面已经滚动的垂直距离，this.maxScrollY是最大垂直滚动距离，this.pointY手指当前的垂直坐标。
当this.y & this.maxScrollY，就是已经处于上拉的过程，当(this.y & this.maxScrollY) && (this.pointY & 1)时，处于上拉且手指已经触及屏幕边缘，这个时候手动触发this.scrollTo(0, this.maxScrollY, 400)，页面就开始回弹。
下拉过程也是一样的道理。 [访问统计：]上一篇： 下一篇：使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求，大部分情况下，实现这个效果都使用网上现有的解决方案，例如有人使用swiper这个插件， 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。
iScroll简介
iScrool是目前最成熟的自定义滚动解决方案之一，在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本：
iscroll.js 通用版 包含了大部分公共特性
iscroll-lite.js 缩减版 削减了一些功能特性，例如：滚动条，鼠标滚轮等等
iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求。
iscroll-zoom.js 滚动缩放版
iscroll-infinite.js 无限制版
根据不同的需求，选择相应的版本，当前的示例中，我们选择的是iscroll-probe.js版。Gitbook地址：
代码思路则是：利用监听滚动条的scroll事件，判断下拉或者上拉的距离，做上触发距离标记，当scrollEnd事件触发时，执行数据加载。让我们看核心部分代码：
HTML代码结构
.scroller {
position: relative;
width: 100%;
height: 100%;
.scroller .warpper {
position: absolute;
width: 100%;
.scroller-pullDown, .scroller-pullUp {
width: 100%;
height: 30px;
padding: 10px 0;
text-align: center;
.dropdown-list {
padding: 0;
margin: 0;
.dropdown-list li {
width: 100%;
background: #ddd;
line-height: 45px;
text-align: center;
color: #FFF;
border-bottom: 1px solid #FFF;
javascript
var pullDown = document.querySelector("#PullDown"),
pullUp = document.querySelector("#PullUp"),
isPulled = false;
完整的demo请看:
原文地址：
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。问题已关闭
问题表意不明
请将问题表述完整，消除歧义。让其他人准确理解你的提问是获得回答的前提。
用iScroll做下拉刷新上拉加载遇到蛋疼的问题?
附js代码：&br&function loaded() {&br&pullDownEl = document.getElementById('pullDown');&br&pullDownOffset = pullDownEl.offsetH&br&pullUpEl = document.getElementById('pullUp');&br&pullUpOffset = 10;&br&myScroll = new iScroll('wrapper', {&br&useTransition: true,&br&topOffset: pullDownOffset,&br&onRefresh: function () {&br&if (pullDownEl.className.match('loading')) {&br&pullDownEl.className = '';&br&pullDownEl.querySelector('.pullDownLabel').innerHTML = '再往上一点';}&br&if (pullUpEl.className.match('loading')) {&br&pullUpEl.className = '';&br&pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载更多';&br&}&br&document.getElementById(&pullUp&).style.display=&none&;&br&document.getElementById(&show&).innerHTML=&onRefresh: up[&+pullUpEl.className+&],down[&+pullDownEl.className+&],Y[&+this.y+&],maxScrollY[&+this.maxScrollY+&],minScrollY[&+this.minScrollY+&],scrollerH[&+this.scrollerH+&],wrapperH[&+this.wrapperH+&]&;&br&},&br&onScrollMove: function () {&br&&br&if (this.y & 0) {&br&pullDownEl.className = 'flip';&br&pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手...';&br&this.minScrollY = 0;&br&}&br&if (this.y & 0 && pullDownEl.className.match('flip')) {&br&pullDownEl.className = '';&br&pullDownEl.querySelector('.pullDownLabel').innerHTML = '不要放手...';&br&this.minScrollY = -pullDownO&br&}&br&&br&if ( this.scrollerH & this.wrapperH && this.y & (this.minScrollY-pullUpOffset) || this.scrollerH & this.wrapperH && this.y & (this.maxScrollY - pullUpOffset) ) {&br&document.getElementById(&pullUp&).style.display=&&;&br&pullUpEl.className = 'flip';&br&pullUpEl.querySelector('.pullUpLabel').innerHTML = '努力加载中...';&br&} &br&if (this.scrollerH & this.wrapperH && this.y & (this.minScrollY-pullUpOffset) && pullUpEl.className.match('flip') || this.scrollerH & this.wrapperH && this.y & (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {&br&document.getElementById(&pullUp&).style.display=&none&;&br&pullUpEl.className = '';&br&pullUpEl.querySelector('.pullUpLabel').innerHTML = '努力加载中...';&br&}&br&},&br&onScrollEnd: function () {&br&document.getElementById(&show&).innerHTML=&onScrollEnd: up[&+pullUpEl.className+&],down[&+pullDownEl.className+&],Y[&+this.y+&],maxScrollY[&+this.maxScrollY+&],minScrollY[&+this.minScrollY+&],scrollerH[&+this.scrollerH+&],wrapperH[&+this.wrapperH+&]&;&br&if (pullDownEl.className.match('flip')) {&br&pullDownEl.className = 'loading';&br&pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';&br&pullDownAction();&br&} &br&if (pullUpEl.className.match('flip')) {&br&pullUpEl.className = 'loading';&br&pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';&br&pullUpAction();&br&}&br&}&br&});&br&}&br&document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);&br&document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
附js代码：function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHpullUpEl = document.getElementById('pullUp');pullUpOffset = 10;myScroll = new iScroll('wrapper', {useTransition: true,topOffset: pullDownOffset,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '再往上一点';}if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载更多';}document.getElementById("pullUp").style.display="none";document.getElementById("show").innerHTML="onRefresh: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";…
已有帐号？
无法登录？
社交帐号登录