上拉加载实现
Posted 冰封ice
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上拉加载实现相关的知识，希望对你有一定的参考价值。
对于上拉加载，本人也是最近开始详细研究，刚开始是在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+=后边跟什么就看自己需要什么了。
以上是关于上拉加载实现的主要内容，如果未能解决你的问题，请参考以下文章