滾動(dòng)加載是個(gè)好東西，可以解決一次加載過多的尷尬，其實(shí)就是變相的分頁，總結(jié)下這個(gè)輪子的用法，挺簡單的。

首先是html結(jié)構(gòu)：

<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屬性
最后是腳本中的初始化和獲取數(shù)據(jù)：

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);         //如果滑動(dòng)到底部，則加載更多數(shù)據(jù)（距離最底部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 = "已經(jīng)沒有更多了..."; 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();           }         }       });      }