mui实现下拉加载更多

html代码

              <link href="../css/mui.min.css" rel="stylesheet" />
                  <div  class="mui-content ">
            <div id="refreshContainer" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                            <!--数据列表-->
                            <ul class="mui-table-view mui-table-view-chevron" id="message">
                            
                        </ul>
                    </div>
            </div
        </div>
        <script type="text/javascript" src="../js/jquery.min.js" ></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>

以下是js代码

        var pager = {}; //分页
    pager.page = 1;
    var totalPage; //总页码
        var total;//总条数
    pullRefresh(pager); //启用上拉下拉 
    console.log(pager.page)
    function pullRefresh() {
        mui("#refreshContainer").pullRefresh({
            up: {
                height: 50, //可选,默认50.触发下拉刷新拖动距离,
                auto: true, //可选,默认false.首次加载自动下拉刷新一次
                contentdown: "下拉可以加载更多", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover: "释放立即加载", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没 有 更 多 数 据 了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    window.setTimeout(function() {
                        pager['size'] = 10; //条数
                        console.log(pager.page)
                        getData(pager);
                    }, 500);
                }
            },

        })
    }

    function getData(params) {
        var start = params.page;
        var end = params.size;
        console.log(start)
        console.log(end)
        mui.ajax("/receiver_message", {
            data: {
                start: start,
                end: end
            },
            dataType: 'json', //服务器返回json格式数据
            type: 'post', //HTTP请求类型
            timeout: 10000, //超时时间设置为10秒；
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function(data) {
                mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                console.log(data.result)
                if(data.result == '0000') {
                    //下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
                    var data = data.messages;
                    var message_id = document.getElementById('message');
                    for(i = 0; i < data.length; i++) {
                        var readsign = "readsign" + data[i].id;
                        //console.log(readsign)
                        var sign;
                        if(data[i].read == true) {
                            sign = '已读';
                        } else if(data[i].read == false) {
                            sign = '未读';
                        }
                        localStorage.setItem('"' + readsign + '"', sign);
                        var readsign_storage = localStorage.getItem('"' + readsign + '"');
                        //console.log(readsign_storage)
                        var html1 = '<li class="mui-table-view-cell mui-collapse " ><a class="mui-navigate-right read" id="read' + data[i].id + '" href="#"><div class="mui-table-cell " style="width: 100%;" ><h4 class="mui-ellipsis-2"><span class="mui-icon mui-icon-chat" style="font-size: 20px;"></span>' + data[i].title

                        var html11 = '<span id="star" class="mui-icon mui-icon-star" style="color:#f00"></span>'
                        var read_type

                        //console.log(readsign)
                        var readsign_storage = localStorage.getItem('"' + readsign + '"');
                        //console.log(readsign_storage)
                        if(readsign_storage == "已读") {
                            read_type = '已读';
                            var html12 = ''
                        } else if(readsign_storage == "未读") {
                            read_type = '未读';

                            var html12 = '<span class="star1" id="star1' + data[i].id + '"></span>'
                        }
                        //console.log(read_type)
                        var html2 = '</h4><h5>发送人：' + data[i].username + '</h5><p class="mui-h5">状态：<span class="color_red" id="readsign' + data[i].id + '">' + read_type + '</span></p><p class="mui-h5">时间：' + data[i].create_time + '</p></div><div class="mui-table-cell mui-col-xs-2 mui-text-left"></div></a><div class="mui-collapse-content"><div class="mui-input-row"><span class="mui-left1" style="font-size:18px ;">消息内容</span><label></label></div><div class="mui-input-row"><span class="mui-left1">标题:</span><p class="mui-left2">' + data[i].title + '</p></div><div class="mui-input-row"><span class="mui-left1">内容:</span><p class="mui-left2">' + data[i].message + '</p></div><div class="mui-input-row"><span class="mui-left1">发送人:</span><p class="mui-left2">' + data[i].username + '</p></div><div class="mui-input-row"><span class="mui-left1">发送时间:</span><p class="mui-left2">' + data[i].create_time + '</p></div>';
                        var html21
                        if(data[i].showbutton == undefined) {
                            html21 = '<div class="mui-button-row"><button class="mui-btn mui-btn-primary breakdetail" type="button" id="' + data[i].related_id + '">查看故障信息</button>&nbsp;&nbsp;</div>';
                        } else if(data[i].showbutton == true) {
                            html21 = '<div class="mui-button-row"><button class="mui-btn mui-btn-primary breakdetail" type="button" id="' + data[i].related_id + '">查看故障信息</button>&nbsp;&nbsp;</div>';
                        } else {
                            html21 = '';
                        }

                        var html22 = '</div></li>';
                        if(data[i].star == true && data[i].read == false) {
                            var html3 = html1 + html11 + html12 + html2 + html21 + html22
                        } else if(data[i].read == true || data[i].star == false) {
                            var html3 = html1 + html11 + html12 + html2 + html21 + html22
                        } else {
                            var html3 = html1 + html11 + html12 + html2 + html21 + html22
                        }

                        message_id.innerHTML += html3;
                    }

                    //这里很重要，这里获取页码 公式：总条数/每页显示条数
                    totalPage = total % pager.size != 0 ?parseInt(total / pager.size) + 1 :total / pager.size;
                    
                
                    if(totalPage == pager.page) { //总页码等于当前页码，停止上拉下拉                mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                    } else {
                        pager.page = pager.page+1;
                        console.log('pager.page' + pager.page)
                        mui('#refreshContainer').pullRefresh().refresh(true);
                    }

                } else if(data.result == '0001') {

                }

            },
            error: function(xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        })
    }