看起來很簡單的東西，實踐過程中還是出現了很多麻煩，比如上拉時，狀態條跑到了頂部，因為內容沒有新增到容器中，再比如下拉的回撥函式使用問題，this的傳遞。

在這裡只做記錄了，程式碼是簡單分離出來的，不能說明太多問題。有使用mui的，可以留言交流

html實現部分

<div class="list-t-wrap">
    <div id="refreshContainer" class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="list-wrapper"
 
>
                <!--列表一定要放到容器內,因為會有一個div append到mui-scroll中,需要在底部才能起作用-->
            </div>
        </div>
    </div>
</div>

js程式碼的實現過程

mui.init({
    pullRefresh : {
        container:"#refreshContainer",//待重新整理區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
        up : {
            height:50
 
,// 可選.預設50.觸發上拉載入拖動距離
            auto:false,// 可選,預設false.自動上拉載入一次
            contentrefresh : "正在載入...",// 可選，正在載入狀態時，上拉載入控制元件上顯示的標題內容
            contentnomore:'沒有更多資料了',// 可選，請求完畢若沒有更多資料時顯示的提醒內容；
            callback : function() {
                var self = this; // 這裡的this == mui('#refreshContainer').pullRefresh()
 

                // 載入更多的內容
                loadMore(this);
            } //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料；
        }
    }
});

// 
var loadMore = function(pullRefresh) {
    // 載入更多的內容到列表中
    // TODO
    // 如果沒有更多資料了，則關閉上拉載入
    pullRefresh.endPullupToRefresh(true);
    // 如果有更多資料，則繼續
    pullRefresh.endPullupToRefresh(false);
};

發現mui到現在的資料還不是很多啊，歡迎吐槽