mui上拉加载

最近在做移动端的项目，用到了mui的上拉加载，整理如下：

1、需要引入的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>

2、静态页的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>

3、静态页面 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>

4、与服务端联调时 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+'">' +                            '价格：<b id="price'+value.id+'">'+value.price.cent/100+'</b>元' +                            '' +                            '送<b id="ss'+value.id+'">'+value.ss+'</b>ss' +                            '</div>' +                            '<div class="buycon">' +                            '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即购买</a>' +                            '</div>' +                            '</div>'                });                jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');            }        }    );}/** * 上拉加载具体业务实现 */function pullupRefresh() {    setTimeout(function () {        mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。        data();    }, 1500);}})();

5、踩的坑

注意：一定要先引入jquery、mui.js否则 js代码会不识别mui。

在jquery中，如果要给动态生成的节点绑定事件，以前要用live，现在用delegate或者on，原理是利用冒泡实现事件委托，也就是给生成节点的父节点预先绑定事件。