mui上拉加載

最近在作移動端的項目，用到了mui的上拉加載，整理以下：

一、須要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css">

<script src="js/jquery-3.2.0.min.js"></script>

<script src="common/mui/js/mui.min.js"></script>

二、靜態頁的dom結構

<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>

三、靜態頁面 js對應的代碼

<script type="text/javascript">

(function(){
//上拉加載下拉刷新
mui.init({
　　pullRefresh: {
　　container: '#pullrefresh',
　　up: {
　　　　contentrefresh: '正在加載...',
　　　　callback: pullupRefresh
　　　　}
　　}
});

//加載更多
var dataNum=12;//獲取數據總數
var pageSize=3;//每頁顯示條數
var counter=1;//計數器
var pageStart=0;//開始數據條數

getData(pageStart,pageSize);

function getData(pageStart,pageSize){
//顯示數不足每頁顯示條數
if(dataNum-pageStart<pageSize){
pageSize=dataNum-pageStart;
data(pageStart,pageSize);
console.log("顯示數不足每頁顯示條數");
}
//顯示隱藏加載更多
else if(pageStart+pageSize>=dataNum){
data(pageStart,pageSize);
console.log("沒有更多數據了");
//沒有更多數據了
}else{
data(pageStart,pageSize);
console.log("顯示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);
//顯示
}

}

function data(pageStart,pageSize){
//業務
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">價格：10元</span>'+
'<span class="icon-golden"></span>'+
'<span class="goods-golden">送1111</span>'+
'</div>'+
'<div class="buycon">'+
'<a class="buybtn buybtnabled" onclick="shop(5)">當即購買</a>'+
'</div>'+
'</div>'
}
console.log(jQuery);
jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');

}
/**
* 上拉加載具體業務實現
*/
function pullupRefresh() {
setTimeout(function() {
var flag=counter++<(dataNum/pageSize)
console.log(dataNum/pageSize);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //參數爲true表明沒有更多數據了。
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>

 

 

四、與服務端聯調時 js作了改動，以下：

    //加載更多
    var pageSize = 15;//每頁顯示條數
    var counter = 1;//計數器
    var pageStart = 0;//開始數據條數
    var Flag=true;

    data();

    function data() {
        //業務
        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=='';
//判斷是否有返回值 當沒有返回值的時候就爲空，則表明沒有更多數據了

                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">價格：<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+')">當即購買</a>' +
                            '</div>' +
                            '</div>'
                });

                jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
                //注意：此處屬於異步獲取DOM
                       在列表中的全部事件應放在此處，防止dom節點獲取失敗。

                 $(".buytap").on("tap",function(){
                     var index = $(this).find(".buybtnid").text();
                     shop(index);
                  })

            }
        }
    );

}
/**
 * 上拉加載具體業務實現
 */
function pullupRefresh() {
    setTimeout(function () {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //參數爲true表明沒有更多數據了。
        data();
    }, 1500);
}
})();

五、踩的坑

注意：必定要先引入jquery、mui.js不然 js代碼會不識別mui。

在jquery中，若是要給動態生成的節點綁定事件，之前要用live，如今用delegate或者on，原理是利用冒泡實現事件委託，也就是給生成節點的父節點預先綁定事件。