iscroll.js滚动加载实例详解
滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。
首先是html结构:
@foreach(variteminViewBag.***) { if(item.IsPay==true) { *** @item.*** *** @item.*** *** @item.***
滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。
首先是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+=""; str+=" *** "+list[i].GoodsName+" *** "+data.DatatimeArray[i]+" "; str+="
把相应的数据填充进去就好,当然控制器里要写一个分页获取数据的方法,通过这里的ajax获取。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。