iscroll.js滚动加载实例详解

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

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

首先是html结构：

<div class=" saleRecord panelList clear" style="position:relative;height:400px;"> 
 <div id="wrapper"> 
 <div id="scroller"> 
 <ul id="thelist"> 
 @foreach (var item in ViewBag.***) 
 { 
 if (item.IsPay == true) 
 { 
 <li> 
 <div class="panelListItemForALL"> 
 <table class="allRecordTable"> 
 <tbody> 
 <tr> 
 <td>***</td> 
 <td>@item.***</td> 
 </tr> 
 <tr> 
 <td>***</td> 
 <td>@item.***</td> 
 </tr> 
 <tr> 
 <td>***</td> 
 <td>@item.***</td> 
 </tr> 
 </tbody> 
 </table> 
 </div> 
 </li> 
 } 
 } 
 </ul> 
 <div id="more">加载更多</div> 
 </div> 
 </div> 

然后是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属性 最后是脚本中的初始化和获取数据：

var pagenum = 1, update = true, id=ID; 
 var myScroll; 
 setTimeout(function(){ 
 myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true }); 
 myScroll.on('scrollEnd', function () { 
 //console.log(this.y +"|||"+this.maxScrollY); 
 //如果滑动到底部，则加载更多数据（距离最底部10px高度） 
 if ((this.y - this.maxScrollY) == 0) { 
 getMore(); 
 } 
 }); 
 },100 ); 
 
 function getMore() { 
 var that = document.getElementById("more"); 
 pagenum++; 
 $.ajax({ 
 url: '/***/getPage', 
 data: {'currentPage':pagenum,'id':id}, 
 type: 'POST', 
 datatype: "json", 
 success: function (data) { 
 //alert(data); 
 var list = data.List; 
 if (list.length < 1) { 
 pagenum--; that.innerHTML = "已经没有更多了..."; return; 
 } 
 var ul = document.getElementById("thelist"); 
 for (var i = 0; i < list.length; i++) { 
 var str = "<li>"; 
 str += "<div class=\"panelListItemForALL\"><table class=\"allRecordTable\"><tbody><tr><td>***</td><td>"+list[i].OrderCode+"</td>"; 
 str += "</tr><tr><td>***</td><td>"+list[i].GoodsName+"</td></tr>"; 
 str += "<tr><td>***</td><td>"+ data.DatatimeArray[i] +"</td>"; 
 str += "</tr></tbody></table></div>"; 
 str += "</li>"; 
 ul.innerHTML += str; 
 myScroll.refresh(); 
 } 
 } 
 }); 
 
 } 

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

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