滾動加載是個好東西，可以解決一次加載過多的尷尬，其實就是變相的分頁，總結(jié)下這個輪子的用法，挺簡單的。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),豐寧企業(yè)網(wǎng)站建設(shè),豐寧品牌網(wǎng)站建設(shè),網(wǎng)站定制,豐寧網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,豐寧網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
首先是html結(jié)構(gòu)：
@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屬性
最后是腳本中的初始化和獲取數(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); //如果滑動到底部，則加載更多數(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 = ""; str += " "; ul.innerHTML += str; myScroll.refresh(); } } }); }"; str += "
*** "+list[i].OrderCode+" "; str += ""; str += " *** "+list[i].GoodsName+" *** "+ data.DatatimeArray[i] +" "; str += "把相應(yīng)的數(shù)據(jù)填充進去就好，當(dāng)然控制器里要寫一個分頁獲取數(shù)據(jù)的方法，通過這里的ajax獲取。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁名稱：iscroll.js滾動加載實例詳解
網(wǎng)站鏈接：http://weahome.cn/article/jshdjd.html
重慶分公司
重慶分公司
