mui上拉加載功能實(shí)例詳解

更新時(shí)間：2017年04月13日 10:59:42 作者：藍(lán)稀稀

最近小編在做移動(dòng)端的項(xiàng)目，用到了mui的上拉加載功能，今天小編給大家整理一下分享到腳本之家平臺(tái)，需要的朋友參考下

最近在做移動(dòng)端的項(xiàng)目，用到了mui的上拉加載，整理如下：

1、需要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" >
<script src="js/jquery-3.2.0.min.js"></script>
<script src="common/mui/js/mui.min.js"></script>

2、靜態(tài)頁(yè)的dom結(jié)構(gòu)

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon">
<div class="mui-scroll">
<div class="mui-table-view mui-table-view-chevron">
</div>
</div>
</div>

3、靜態(tài)頁(yè)面 js對(duì)應(yīng)的代碼

<script type="text/javascript">
(function(){
//上拉加載下拉刷新
mui.init({
　　pullRefresh: {
　　container: '#pullrefresh',
　　up: {
　　　　contentrefresh: '正在加載...',
　　　　callback: pullupRefresh
　　　　}
　　}
});
//加載更多
var dataNum=12;//獲取數(shù)據(jù)總數(shù)
var pageSize=3;//每頁(yè)顯示條數(shù)
var counter=1;//計(jì)數(shù)器
var pageStart=0;//開始數(shù)據(jù)條數(shù)
getData(pageStart,pageSize);
function getData(pageStart,pageSize){
//顯示數(shù)不足每頁(yè)顯示條數(shù)
if(dataNum-pageStart<pageSize){
pageSize=dataNum-pageStart;
data(pageStart,pageSize);
console.log("顯示數(shù)不足每頁(yè)顯示條數(shù)");
}
//顯示隱藏加載更多
else if(pageStart+pageSize>=dataNum){
data(pageStart,pageSize);
console.log("沒(méi)有更多數(shù)據(jù)了");
//沒(méi)有更多數(shù)據(jù)了
}else{
data(pageStart,pageSize);
console.log("顯示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);
//顯示
}
}
function data(pageStart,pageSize){
//業(yè)務(wù)
var result="";
for(var i=pageStart;i<(pageStart+pageSize);i++){
result+='<div class="goode-msg">'+
'<div class="goods">'+
'<p class="goode-name">嗚嗚嗚嗚</p>'+
'<span class="goods-price">價(jià)格：10元</span>'+
'<span class="icon-golden"></span>'+
'<span class="goods-golden">送1111</span>'+
'</div>'+
'<div class="buycon">'+
'<a class="buybtn buybtnabled" onclick="shop(5)">立即購(gòu)買</a>'+
'</div>'+
'</div>'
}
console.log(jQuery);
jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
}
/**
* 上拉加載具體業(yè)務(wù)實(shí)現(xiàn)
*/
function pullupRefresh() {
setTimeout(function() {
var flag=counter++<(dataNum/pageSize)
console.log(dataNum/pageSize);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //參數(shù)為true代表沒(méi)有更多數(shù)據(jù)了。
var scroll = document.body.querySelector('.mui-scroll .mui-table-view');
var item = document.body.querySelectorAll('.goode-msg');
console.log(counter);
if(flag){
console.log(counter);
pageStart=counter*pageSize;
data(pageStart,pageSize);
}
}, 1500);
}
})();
</script>

4、與服務(wù)端聯(lián)調(diào)時(shí) js做了改動(dòng)，如下：

 //加載更多
 var pageSize = 15;//每頁(yè)顯示條數(shù)
 var counter = 1;//計(jì)數(shù)器
 var pageStart = 0;//開始數(shù)據(jù)條數(shù)
 var Flag=true;
 data();
 function data() {
  //業(yè)務(wù)
  var result = "";
  $.ajax({
   type: 'post',
   url: '/xxx/xxx',
   async: false,
   dataType: "json",
   data: {page: counter},
   success: function (data) {
    Flag=data[0].dd==null||data[0].dd==undefined||data[0].dd=='';
//判斷是否有返回值 當(dāng)沒(méi)有返回值的時(shí)候就為空，則代表沒(méi)有更多數(shù)據(jù)了
    console.log(Flag);
    if(Flag==false){
     counter++;
    }
    $.each(data[0].dd, function (i, value) {
     result += '<div class="goode-msg">' +
       '<div class="goods">' +
       '<input type="hidden" class="id" value="'+value.id+'">' +
       '<input type="hidden" class="aa" value="'+value.aa+'">' +
       '<p class="goode-name" id="title'+value.id+'">'+value.title+'</p>' +
       '<input type="hidden" class="goods-price-cent" value="'+value.price.cent/100+'">' +
       '<span class="goods-price">價(jià)格：<b id="price'+value.id+'">'+value.price.cent/100+'</b>元</span>' +
       '<span class="icon-golden"></span>' +
       '<span class="goods-golden">送<b id="ss'+value.id+'">'+value.ss+'</b>ss</span>' +
       '</div>' +
       '<div class="buycon">' +
       '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即購(gòu)買</a>' +
       '</div>' +
       '</div>'
    });
    jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
   }
  }
 );
}
/**
 * 上拉加載具體業(yè)務(wù)實(shí)現(xiàn)
 */
function pullupRefresh() {
 setTimeout(function () {
  mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //參數(shù)為true代表沒(méi)有更多數(shù)據(jù)了。
  data();
 }, 1500);
}
})();

5、踩的坑

注意：一定要先引入jquery、mui.js否則 js代碼會(huì)不識(shí)別mui。

在jquery中，如果要給動(dòng)態(tài)生成的節(jié)點(diǎn)綁定事件，以前要用live，現(xiàn)在用delegate或者on，原理是利用冒泡實(shí)現(xiàn)事件委托，也就是給生成節(jié)點(diǎn)的父節(jié)點(diǎn)預(yù)先綁定事件。

以上所述是小編給大家介紹的mui上拉加載功能實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: