iscroll5 上下拉动刷新

在这我不想说其他写的如何如何，虽然本人不是很会css3，但是修改倒是没问题网上说的iscroll5全改了从4升级5要改动内部代码。

我了个神，修改别人的ok的源码万一哪天又要更谁知道你改的那个。

这个iscroll5的示例包本身就不用改，就能支持上下拉动刷新只不过导入的不是基础的iscroll.js，导入的是iscroll-probe.js

我这里用的jquery是1.8 至于css什么的别关心了，只是把别人写好的拿来改改增强用户体验而已。别说什么

topOffset 这个属性没有什么的，我这就ok。

网上写的拉动刷新是由bug的，当拉动后在快速接着拉动，这时候会执行两次刷新方法和动画我这里解决了这问题

当然我试过修改isScroll.options.xxx属性想禁止滚动。等待我开启滚动。

记住导入isScroll5的js是iscroll-probe.js

var myScroll;
var pullDownEl, pullDownL;
var pullUpEl, pullUpL;
var Downcount = 0 ,Upcount = 0;
var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
function pullDownAction() {//下拉事件
setTimeout(function() {
var el, li, i;
el = $('#add');
for (i = 0; i < 3; i++) {
li = $("<li></li>");
Downcount++;
li.text('new Add ' + Downcount + " ！");
el.prepend(li);
}
pullDownEl.removeClass('loading');
pullDownL.html('下拉显示更多...');
pullDownEl['class'] = pullDownEl.attr('class');
pullDownEl.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
}, 1000); //1秒
}
function pullUpAction() {//上拉事件
setTimeout(function() {
var el, li, i;
el = $('#add');
for (i = 0; i < 3; i++) {
li = $("<li></li>");
Upcount++;
li.text('new Add ' + Upcount + " ！");
el.append(li);
}
pullUpEl.removeClass('loading');
pullUpL.html('上拉显示更多...');
pullUpEl['class'] = pullUpEl.attr('class');
pullUpEl.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
}, 1000);
}
function loaded() {
pullDownEl = $('#pullDown');
pullDownL = pullDownEl.find('.pullDownLabel');
pullDownEl['class'] = pullDownEl.attr('class');
pullDownEl.attr('class','').hide();
pullUpEl = $('#pullUp');
pullUpL = pullUpEl.find('.pullUpLabel');
pullUpEl['class'] = pullUpEl.attr('class');
pullUpEl.attr('class','').hide();
myScroll = new IScroll('#content', {
probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
scrollbars: true,//有滚动条
mouseWheel: true,//允许滑轮滚动
fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
bounce:true,//边界反弹
interactiveScrollbars:true,//滚动条可以拖动
shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
click: true ,// 允许点击事件
keyBindings:true,//允许使用按键控制
momentum:true// 允许有惯性滑动
});
//滚动时
myScroll.on('scroll', function(){
if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){
if (this.y > 5) {
//下拉刷新效果
pullDownEl.attr('class',pullUpEl['class'])
pullDownEl.show();
myScroll.refresh();
pullDownEl.addClass('flip');
pullDownL.html('准备刷新...');
loadingStep = 1;
}else if (this.y < (this.maxScrollY - 5)) {
//上拉刷新效果
pullUpEl.attr('class',pullUpEl['class'])
pullUpEl.show();
myScroll.refresh();
pullUpEl.addClass('flip');
pullUpL.html('准备刷新...');
loadingStep = 1;
}
}
});
//滚动完毕
myScroll.on('scrollEnd',function(){
if(loadingStep == 1){
if (pullUpEl.attr('class').match('flip|loading')) {
pullUpEl.removeClass('flip').addClass('loading');
pullUpL.html('Loading...');
loadingStep = 2;
pullUpAction();
}else if(pullDownEl.attr('class').match('flip|loading')){
pullDownEl.removeClass('flip').addClass('loading');
pullDownL.html('Loading...');
loadingStep = 2;
pullDownAction();
}
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

css,还是原封不动的

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden;
/* this is important to prevent the whole page to bounce */
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#content {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
#pullDown,#pullUp {
height: 40px;
line-height: 40px;
padding: 5px 10px;
font-weight: bold;
font-size: 14px;
color: #888;
}
#pullDown .pullDownIcon,#pullUp .pullUpIcon {
display: block;
float: left;
width: 40px;
height: 40px;
background: url(img/pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size: 40px 80px;
background-size: 40px 80px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 250ms;
}
#pullDown .pullDownIcon {
-webkit-transform: rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform: rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.-webkit-keyframes loading {
from {
-webkit-transform:rotate(0deg)translateZ(0);
}
.to {
-webkit-transform: rotate(360deg) translateZ(0);
}
}

html代码块

<body onload="loaded()">
<div id="header">iScroll</div>
<div id="content">
<div id="scroller">
<div id="pullDown" class="ub ub-pc c-gra">
<div class="pullDownIcon"></div>
<div class="pullDownLabel">下拉刷新</div>
</div>
<ul id="add">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
<li>Pretty row 41</li>
<li>Pretty row 42</li>
<li>Pretty row 43</li>
<li>Pretty row 44</li>
<li>Pretty row 45</li>
<li>Pretty row 46</li>
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
<div id="pullUp" class="ub ub-pc c-gra">
<div class="pullUpIcon"></div>
<div class="pullUpLabel">上拉显示更多...</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
iscroll5-96x96.jpg (3.42 KB, 下载次数: 410)

下载附件保存到相册

2014-8-6 15:40 上传

iscroll5 上下拉动刷新 发布人： 袁康慨 发布时间：2014-08-06 浏览：6103

iscroll5 上下拉动刷新
发布人：袁康慨发布时间：2014-08-06 浏览：6103