微客导航 » 文章资讯 » iscroll.js滚动加载实例详解

iscroll.js滚动加载实例详解

2024-01-27 15:10:03 316

滚动加载是个好东西，可以解决一次加载过多的尴尬，其实就是变相的分页，总结下这个轮子的用法，挺简单的。

首先是html结构：





@foreach(variteminViewBag.***)
{
if(item.IsPay==true)
{





***
@item.***


***
@item.***


***
@item.***

} } 加载更多

然后是css样式：

#wrapper{
position:absolute;
z-index:1;
top:0;
bottom:0;
left:0;
width:100%;
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;
}
#more
{
text-align:center;
}

需要的话，给父元素套上position:relative属性
最后是脚本中的初始化和获取数据：

varpagenum=1,update=true,id=ID;
varmyScroll;
setTimeout(function(){
myScroll=newIScroll('#wrapper',{mouseWheel:true,click:true});
myScroll.on('scrollEnd',function(){
//console.log(this.y+"|||"+this.maxScrollY);
//如果滑动到底部，则加载更多数据（距离最底部10px高度）
if((this.y-this.maxScrollY)==0){
getMore();
}
});
},100);

functiongetMore(){
varthat=document.getElementById("more");
pagenum++;
$.ajax({
url:'/***/getPage',
data:{'currentPage':pagenum,'id':id},
type:'POST',
datatype:"json",
success:function(data){
//alert(data);
varlist=data.List;
if(list.length<1){
pagenum--;that.innerHTML="已经没有更多了...";return;
}
varul=document.getElementById("thelist");
for(vari=0;i***"+list[i].OrderCode+"";
str+="***"+list[i].GoodsName+"";
str+="***"+data.DatatimeArray[i]+"";
str+="

"; str+=""; ul.innerHTML+=str; myScroll.refresh(); } } }); }

把相应的数据填充进去就好，当然控制器里要写一个分页获取数据的方法，通过这里的ajax获取。

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

返回顶部
3162201930
czq8825@qq.com

iscroll.js滚动加载实例详解

热门推荐

随机推荐