mui 框架中結合mui.ajax實現 下拉刷新和上拉加載功能

實現方式與之前寫的jquery weui 下拉刷新和上拉加載功能有點相似，以下是實現過程！

后台返回的數據格式：

 

頁面代碼布局：

<header id="header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">訂單列表</h1>
    <a class="mui-icon  mui-pull-right iconfont icon-tuichu" title="退出" style="color:#fff;" id="Sign_out"></a>
</header>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper pd-btm-50">
    <div class="mui-scroll">
        <!--數據列表-->
        <ul id="showdata" class="mui-table-view mui-table-view-chevron"></ul>
    </div>
</div>

js部分代碼：

<script>
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加載...',
                callback: pullupRefresh
            }
        }
    });

    /**
     * 加載數據
     */
    var page =1;
    var limit = 8;
    var isOver = false;//狀態標識 是否加載完數據
    function getData() {
        var html = "";
        mui.ajax('/order/listquery', {
            data: {
                'page': page,
                'limit': limit,
                'OrderState':83
            },
            dataType: 'json',
            type: 'post',
            async: false,
            crossDomain: false,
            success: function (jsondata) {
                console.log(jsondata);              
                if (jsondata.code == 200) {
                    var data = jsondata.data.list;
                    for (var i = 0; i < data.length; i++) {
                            html += '<li class="mui-card mg-btm-20 mui-card-order">';
                            html += '<ul class="mui-table-view">';
                            html += '<li class="mui-table-view-cell" style="color: #06abf6;">訂單編號：' + data[i].orderNumber
                            html += '<button type="button" class="mui-btn mui-btn-success" style="right:0px; top:12px;">' + data[i].orderTypeName + '</button>';
                            html += '</li>';
                            html += '<li class="mui-table-view-cell">';
                            html += '<span class="mui-icon iconfont icon-hezi401"></span>名稱：' + data[i].GoodsName + '<label style="float:right; color: #f42d07;">狀態：' + data[i].OrderStateName + '</label>';
                            html += '</li>';
                            html += '<li class="mui-table-view-cell">';
                            html += '<span class="mui-icon mui-icon-paperplane" style="font-size: 20px;"></span>起運地：' + data[i].OriginatingCity
                            html += '<span class="mui-icon mui-icon-arrowthinright"></span>';
                            html += '<span class="mui-icon mui-icon-flag"></span>目的地：' + data[i].GoalCity
                            html += '</li>';
                            html += '<li class="mui-table-view-cell">';
                            html += '<span class="mui-icon iconfont icon-riqi"></span>日期：' + data[i].createDate
                            html += '</li>';
                            html += '<li class="mui-table-view-cell" style="height: 40px;">';
                            html += '<button type="button" id="detailBtn" value="' + data[i].ID + '" class="mui-btn mui-btn-primary">查看訂單詳情</button>';
                            html += '</li>';
                            html += '</ul>';
                            html += '</li>';                     
                    }      
                    $('#showdata').append(html)
                    //判斷當前頁碼是否與總頁碼一致，如果一致則標識為true
                    if (Math.floor(jsondata.data.total / jsondata.data.limit) == page) { 
                         isOver = true;  
                    } else {
                        isOver = false;   //每次加載結束之后，如果下拉滾動還有數據則++
                        page++;
                    }         
                }
            },
        });
    }
    /**
     * 下拉刷新具體業務實現
     */
    function pulldownRefresh() {
        setTimeout(function () {
            if (isOver) {
                isOver = false; 
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //下拉刷新結束         
            $('#showdata').html(""); 
            page = 1;
            getData();
            mui('#pullrefresh').pullRefresh().refresh(true);  //重置加載
        }, 1500);

    }
    /**
     * 上拉加載具體業務實現
     */
    function pullupRefresh() {
        setTimeout(function () {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(isOver); //isOver參數為true代表沒有更多數據了。
            if (isOver == false) {  //isOver參數為false則繼續加載數據
                getData();
            }    
        }, 1500);
    }
    if (mui.os.plus) {
        mui.plusReady(function () {
            setTimeout(function () {
                mui('#pullrefresh').pullRefresh().pullupLoading();
            }, 1000);
        });
    } else {
        mui.ready(function () {
            mui('#pullrefresh').pullRefresh().pullupLoading();
        });
    }
</script>