輾轉(zhuǎn)用mui做了兩個(gè)項(xiàng)目，空下來(lái)把mui上拉加載更多，下拉刷新數(shù)據(jù)做了一個(gè)簡(jiǎn)單的封裝，希望可以幫助到需要的朋友
demo項(xiàng)目的結(jié)構(gòu)
直接貼代碼了
index.html
mui上拉刷新下拉加載都這里了，兩個(gè)方法搞定
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>mui上拉刷新下拉加載demo--封裝</title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/> <style type="text/css"> li{ height: 30px; line-height: 30px; font-size: 14px; color: #bbb; text-indent: 4%; border-bottom: 1px solid currentColor; } </style></head><body> <!--下拉刷新容器--> <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--數(shù)據(jù)列表--> <ul class="mui-table-view mui-table-view-chevron" id="list"> </ul> </div> </div></body><script type="text/javascript" charset="utf-8"> var pager = {};//分頁(yè) var totalPage;//總頁(yè)碼 pullRefresh(pager);//啟用上拉下拉 function pullRefresh(){ mui("#refreshContainer").pullRefresh({ up:{ contentrefresh : "正在加載...",//可選，正在加載狀態(tài)時(shí)，上拉加載控件上顯示的標(biāo)題內(nèi)容 contentnomore:'沒(méi) 有 更 多 數(shù) 據(jù) 了',//可選，請(qǐng)求完畢若沒(méi)有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容； callback:function(){//必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來(lái)編寫，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； window.setTimeout(function(){ getData(pager); },500); } }, down : { height:50,//可選,默認(rèn)50.觸發(fā)下拉刷新拖動(dòng)距離, auto: true,//可選,默認(rèn)false.首次加載自動(dòng)下拉刷新一次 contentdown : "下拉可以刷新",//可選，在下拉可刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 contentover : "釋放立即刷新",//可選，在釋放可刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 contentrefresh : "正在刷新...",//可選，正在刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 callback :function(){ //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來(lái)編寫，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； window.setTimeout(function(){ pager['size']= 3;//條數(shù) pager['page'] = 1;//頁(yè)碼 //刷新要先清空父節(jié)點(diǎn)里面的子節(jié)點(diǎn) var f = document.getElementById("list"); var childs = f.childNodes; for(var i = childs.length - 1; i >= 0; i--) { f.removeChild(childs[i]); } getData(pager); },500); } } }) } //這個(gè)方法是負(fù)責(zé)向接口請(qǐng)求數(shù)據(jù)的，你可以選擇你喜歡的方式，我這里是直接用的mui.ajax function getData(params){ mui.ajax("/article/getArticlePage",{ data:{ "header":{"os":"wap","app":"xxxx","ver":1.0}, "data":params }, dataType:'json', type:'post', headers:{'Content-Type':'application/json'}, success:function(data){ mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //下面這坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue雙向綁定 var returnData = data.data; var element=document.getElementById("list"); var para; var node; for(var i = 0; i<returnData.length;i++){ para = document.createElement("li"); node = document.createTextNode(returnData[i].article_title) para.appendChild(node); element.appendChild(para); } //這里很重要，這里獲取頁(yè)碼 公式：總條數(shù)/每頁(yè)顯示條數(shù) totalPage = data.ext%pager.size!=0? parseInt(data.ext/pager.size)+1: data.ext/pager.size; if(totalPage==pager.page){//總頁(yè)碼等于當(dāng)前頁(yè)碼，停止上拉下拉 mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); }else{ pager.page++; mui('#refreshContainer').pullRefresh().refresh(true); } }, error:function(xhr,type,errorThrown){ //異常處理； console.log(type); } }) } </script></html>代碼就貼完了 就是看起來(lái)不是很好看
下面是效果圖，想弄視頻上來(lái)的 然后發(fā)現(xiàn)太雞肋了 弄不上來(lái) 氣死我了
PS：下面給大家分享一段示例代碼：MUI 做上拉下拉加載更多數(shù)據(jù)小記
html代碼
<div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div id="mui-scroll" class="mui-scroll"> <ul id="refresh-ul" class="mui-table-view"> <!-- 內(nèi)容 --> </ul> </div> </div> <script type="text/javascript"> mui('body').on('tap','a',function(){document.location.href=this.href;});//監(jiān)聽讓頁(yè)面A標(biāo)簽的超鏈接 是有效狀態(tài) mui.init({ pullRefresh : { container:"#pullrefresh",//下拉刷新容器標(biāo)識(shí)，querySelector能定位的css選擇器均可，比如：id、.class等 up : { height:50,//可選,默認(rèn)50.觸發(fā)下拉刷新拖動(dòng)距離, auto: true,//可選,默認(rèn)false.自動(dòng)下拉刷新一次 contentdown : "下拉可以刷新",//可選，在下拉可刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 contentover : "釋放立即刷新",//可選，在釋放可刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 contentrefresh : "正在刷新...",//可選，正在刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 callback :function(){ //業(yè)務(wù)邏輯代碼，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； //注意，加載完新數(shù)據(jù)后，必須執(zhí)行如下代碼，注意：若為ajax請(qǐng)求，則需將如下代碼放置在處理完ajax響應(yīng)數(shù)據(jù)之后 //mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed var pagecount=$("#pagecount").val(); var page=$("#page").val(); pagecount=parseInt(pagecount); page=parseInt(page); page+=1; $.ajax({ url:"/mobile/seckill/order/order_refresh_ajax.jhtml", type: 'post', datatype:'html', data: {'pagecount': pagecount,'page':page}, async: false,//false代表只有在等待ajax執(zhí)行完畢后才執(zhí)行 success: function(data,msg){ $("#refresh-ul").append(data); $("#page").val(page); }, error: function(data,msg){ alert("error"); } }); this.endPullupToRefresh(false); } //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來(lái)編寫，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； } } }); if(mui.os.plus) { mui.plusReady(function() { setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000); }); } else { mui.ready(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }); } function goShoppingCart() { window.location.href = "/mobile/seckill/shoppingcart.jhtml"; } </script> 總結(jié)
以上所述是小編給大家介紹的mui上拉加載更多下拉刷新數(shù)據(jù)的封裝過(guò)程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
