微客导航 » 文章资讯 » IScroll5实现下拉刷新上拉加载的功能实例

IScroll5实现下拉刷新上拉加载的功能实例

2023-09-26 17:24:05 164

声明：虽然本文章为原创，但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下。

实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）

外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的iscroll.js插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jQuery简化一下开发

以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来


*{
-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;/*thisisimportanttopreventthewholepagetobounce*/
}

#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:1pxsolid#444;
}

#wrapper{
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;
}

#scrollerul{
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}

#scrollerli{
padding:010px;
height:40px;
line-height:40px;
border-bottom:1pxsolid#ccc;
border-top:1pxsolid#fff;
background-color:#fafafa;
font-size:14px;
}
#pullDown,#pullUp,.pulldown-tips{
height:40px;
line-height:40px;
text-align:center;
}
.pulldown-tips{
position:absolute;
top:-40px;
left:0;
width:100%;
}

html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示


iScroll

下拉刷新

Prettyrow1

Prettyrow2

Prettyrow3

Prettyrow4

Prettyrow5

Prettyrow6

Prettyrow7

Prettyrow8

Prettyrow9

Prettyrow10

Prettyrow11

Prettyrow12

Prettyrow13

Prettyrow14

Prettyrow15

Prettyrow16

Prettyrow17

Prettyrow18

Prettyrow19

Prettyrow20

加载更多

js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmove事件，scrollEnd事件也类似touchend事件，在滚动结束后执行



functionload(){
varmyScroll,
pullDown=$("#pullDown"),
pullUp=$("#pullUp"),
pullDownLabel=$(".pullDownLabel"),
pullUpLabel=$(".pullUpLabel"),
container=$('#list'),
loadingStep=0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新

pullDown.hide();
pullUp.hide();

myScroll=newIScroll("#wrapper",{
scrollbars:true,
mouseWheel:false,
interactiveScrollbars:true,
shrinkScrollbars:'scale',
fadeScrollbars:true,
scrollY:true,
probeType:2,
bindToWrapper:true
});
myScroll.on("scroll",function(){
if(loadingStep==0&&!pullDown.attr("class").match('refresh|loading')&&!pullUp.attr("class").match('refresh')){
if(this.y>40){//下拉刷新操作
$(".pulldown-tips").hide();
pullDown.addClass("refresh").show();
pullDownLabel.text("松手刷新数据");
loadingStep=1;
myScroll.refresh();
}elseif(this.y<(this.maxScrollY-14)){//上拉加载更多
pullUp.addClass("refresh").show();
pullUpLabel.text("正在载入");
loadingStep=1;
pullUpAction();
}
}
});
myScroll.on("scrollEnd",function(){
if(loadingStep==1){
if(pullDown.attr("class").match("refresh")){//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep=2;
pullDownAction();
}
}
});

functionpullDownAction(){
setTimeout(function(){
varli,i;
for(i=0,li="";i<3;i++){
li+=""+"newAdd"+newDate().toLocaleString()+"！"+"";
}
container.prepend(li);
pullDown.attr('class','').hide();
myScroll.refresh();
loadingStep=0;
$(".pulldown-tips").show();
},1000);
}
functionpullUpAction(){
setTimeout(function(){
varli,i;
for(i=0,li="";i<3;i++){
li+=""+"newAdd"+newDate().toLocaleString()+"！"+"";
}
container.append(li);
pullUp.attr('class','').hide();
myScroll.refresh();
loadingStep=0;
},1000);
}

document.addEventListener('touchmove',function(e){e.preventDefault();},false);
}

如有出错，欢迎指正 PS：测试环境在firefox的响应式开发环境下运行

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

IScroll5实现下拉刷新上拉加载的功能实例

热门推荐

随机推荐