對于上拉加載，本人也是最近開始詳細研究，剛開始是在mui上邊直接用的框架實現的，具體方法很簡單。下面給出代碼片段
HTML代碼：
1 <!--下拉刷新容器--> 2 <link rel="stylesheet" type="text/css" href="css/cell.css" /> 3 <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> 4 <div class="mui-scroll"> 5 <!--數據列表--> 6 <ul class="mui-table-view mui-table-view-chevron"> 7 <li class="commodity"> 8 <div class="commodity_item"> 9 <img class="commodity_item_showImage" src="img/timg (1).jpg" alt="蘋果手機"> 10 <div class="commodity_item_msg"> 11 <p>蘋果6S 168G三網通</p> 12 <p>商品介紹商品介紹商品介紹商品介紹商品介紹</p> 13 <p id="pricing"><span>￥：</span><span>7800</span> 14 <a href="" id="go_shopping">立即搶購</a> 15 </p> 16 </div> 17 </div> 18 </li> 19 <li class="commodity" style="margin-left: -3px;"> 20 <div class="commodity_item"> 21 <img class="commodity_item_showImage" src="img/timg (1).jpg" alt="蘋果手機"> 22 <div class="commodity_item_msg"> 23 <p>蘋果6S 168G三網通</p> 24 <p>商品介紹商品介紹商品介紹商品介紹商品介紹</p> 25 <p id="pricing"><span>￥：</span><span>7800</span> 26 <a href="" id="go_shopping">立即搶購</a> 27 </p> 28 </div> 29 </div> 30 </li> 31 <li class="commodity" > 32 <div class="commodity_item"> 33 <img class="commodity_item_showImage" src="img/timg (1).jpg" alt="蘋果手機"> 34 <div class="commodity_item_msg"> 35 <p>蘋果6S 168G三網通</p> 36 <p>商品介紹商品介紹商品介紹商品介紹商品介紹</p> 37 <p id="pricing"><span>￥：</span><span>7800</span> 38 <a href="" id="go_shopping">立即搶購</a> 39 </p> 40 </div> 41 </div> 42 </li> 43 <li class="commodity" style="margin-left: -3px;"> 44 <div class="commodity_item"> 45 <img class="commodity_item_showImage" src="img/timg (1).jpg" alt="蘋果手機"> 46 <div class="commodity_item_msg"> 47 <p>蘋果6S 168G三網通</p> 48 <p>商品介紹商品介紹商品介紹商品介紹商品介紹</p> 49 <p id="pricing"><span>￥：</span><span>7800</span> 50 <a href="" id="go_shopping">立即搶購</a> 51 </p> 52 </div> 53 </div> 54 </li> 55 </ul> 56 </div> 57 </div>
JavaScript代碼片段：
1 mui.init({ 2 pullRefresh: { 3 container: '#pullrefresh', 4 down: { 5 callback: pulldownRefresh 6 }, 7 up: { 8 contentrefresh: '正在加載...', 9 callback: pullupRefresh 10 } 11 } 12 }); 13 /** 14 * 下拉刷新具體業務實現 15 */ 16 function pulldownRefresh() { 17 setTimeout(function() { 18 var table = document.body.querySelector('.mui-table-view'); 19 var cells = document.body.querySelectorAll('.commodity'); 20 for(var i = cells.length, len = i + 3; i < len; i++) { 21 var li = document.createElement('li'); 22 li.className = 'commodity'; 23 li.innerHTML = '<div class="commodity_item"><img class="commodity_item_showImage" src="img/timg (1).jpg" alt="蘋果手機"><div class="commodity_item_msg"><p>蘋果6S 168G三網通</p><p>商品介紹商品介紹商品介紹商品介紹商品介紹</p><p id="pricing"><span>￥：</span><span>7800</span><a href="" id="go_shopping">立即搶購</a></p></div></div>'; 24 //下拉刷新，新紀錄插到最前面； 25 table.insertBefore(li, table.firstChild); 26 } 27 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed 28 }, 1500); 29 } 30 var count = 0; 31 /** 32 * 上拉加載具體業務實現 33 */ 34 function pullupRefresh() { 35 setTimeout(function() { 36 mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //參數為true代表沒有更多數據了。 37 var table = document.body.querySelector('.mui-table-view'); 38 var cells = document.body.querySelectorAll('.commodity'); 39 for(var i = cells.length, len = i + 20; i < len; i++) { 40 var li = document.createElement('li'); 41 li.className = 'commodity'; 42 // li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; 43 li.innerHTML = '<div class="commodity_item"><img class="commodity_item_showImage" src="img/timg (1).jpg" alt="蘋果手機"><div class="commodity_item_msg"><p>蘋果6S 168G三網通</p><p>商品介紹商品介紹商品介紹商品介紹商品介紹</p><p id="pricing"><span>￥：</span><span>7800</span><a href="" id="go_shopping">立即搶購</a></p></div></div>'; 44 table.appendChild(li); 45 } 46 }, 1500); 47 } 48 if(mui.os.plus) { 49 mui.plusReady(function() { 50 setTimeout(function() { 51 mui('#pullrefresh').pullRefresh().pullupLoading(); 52 }, 1000); 53 54 }); 55 } else { 56 mui.ready(function() { 57 mui('#pullrefresh').pullRefresh().pullupLoading(); 58 }); 59 }
具體原理實現是在mui內部寫的，我們這里只要知道怎么用即可。
下面是我在網上看到的一個插件dropload也是實現上拉加載。
只要引入其中的代碼
1 <link rel="stylesheet" type="text/css" href="dist/css/dropload.css"/> 2 <!--引入上拉加載--> 3 <script src="dist/js/dropload.min.js" type="text/javascript" charset="utf-8"></script>
具體實現的代碼是：
1 //上拉加載 2 var itemIndex = 0; 3 var counter = 0; 4 // 每頁展示4個 5 var num = 4; 6 var pageStart = 0, 7 pageEnd = 0; 8 9 // dropload 10 var dropload = $('.host-content').dropload({ 11 scrollArea: window, 12 loadDownFn: function(me) { 13 // 加載菜單一的數據 14 if(itemIndex == '0') { 15 $.ajax({ 16 type: 'GET', 17 url: 'json/index.json', 18 dataType: 'json', 19 success: function(data) { 20 var result = ''; 21 counter++; 22 pageEnd = num * counter; 23 pageStart = pageEnd - num; 24 25 if(pageStart <= data.lists.length) { 26 for(var i = pageStart; i < pageEnd; i++) { 27 result += '<li>' + '<a class = "host-content-catalogue-item catalogue-item" href=" '+ data.lists[i].href +' ">' + 28 '<div class = "catalogue-item-showImage">' + '<img src = "' + data.lists[i].pic + '" / >' + '</div>' + '<div class = "catalogue-item-msg" >' + 29 '<p class = "catalogue-item-msg-title" >' + data.lists[i].title + '</p>' + '<p class = "catalogue-item-msg-intro" >' + data.lists[i].details + '</p>' + 30 '<p id = "pricing" >' + '<span>' + "￥" + '</span>' + '<span>' + data.lists[i].price + '</span>' + '<a href = " '+ data.lists[i].href +' " id = "go-shopping" >' + "立即搶購" + '</a>' + '</p>' + '</div>' + '</a>' + '</li>'; 31 if((i + 1) >= data.lists.length) { 32 // 數據加載完 33 tab1LoadEnd = true; 34 // 鎖定 35 me.lock(); 36 // 無數據 37 me.noData(); 38 break; 39 } 40 } 41 // 為了測試，延遲1秒加載 42 setTimeout(function() { 43 $('.host-content-catalogue ul').eq(itemIndex).append(result); 44 // 每次數據加載完，必須重置 45 me.resetload(); 46 }, 1000); 47 } 48 }, 49 error: function(xhr, type) { 50 alert('Ajax error!'); 51 // 即使加載出錯，也得重置 52 me.resetload(); 53 } 54 }); 55 } 56 } 57 });
這樣就可以完整的實現上拉加載了，具體result+=后邊跟什么就看自己需要什么了。
![[高性能javascript笔记]1-加载和执行](https://www.oschina.net/img/hot3.png)
