iscroll.js滚动加载实例详解

这篇文章主要为大家详细介绍了iscroll.js滚动加载实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

首先是html结构：

    
 @foreach (var item in ViewBag.***) { 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属性
最后是脚本中的初始化和获取数据：

 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 = "
"; str += ""; str += ""; str += ""; str += "
***
"+list[i].OrderCode+"
***
"+list[i].GoodsName+"
***
"+ data.DatatimeArray[i] +"
"; str += "
"; ul.innerHTML += str; myScroll.refresh(); } } }); } 

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

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

以上就是iscroll.js滚动加载实例详解的详细内容，更多请关注本站其它相关文章！