寫在前邊：

工作需要，使用ajax在原來的列表下邊使用ajax請求后台數據，拼接在列表最下邊，在github轉了好久，發現了一個bug極多的js刷新插件，嘗試了一個下午，就在快放棄的時候，發現下邊有留言說用mescroll框架比較簡單好用。遂研究許久，做Javaweb嘛，難免碰前端……

mescroll.js快速上手：

前往mescroll官網下載js和css ：http://www.mescroll.com/load.html

1. 下載並引用 mescroll.min.css , mescroll.min.js

2. 拷貝以下布局結構 :

<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能刪
    //列表內容,如:<ul>列表數據</ul> ...
</div>

3.創建mescroll對象 :

var mescroll = new MeScroll("mescroll", { //第一個參數"mescroll"對應上面布局結構div的id
                   //如果您的下拉刷新是重置列表數據,那么down完全可以不用配置,具體用法參考第一個基礎案例
                   //解析: down.callback默認調用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發up.callback
                down: {
                    callback: downCallback //下拉刷新的回調,別寫成downCallback(),多了括號就自動執行方法了
                },
                up: {
                    callback: upCallback //上拉加載的回調
                }
});

4. 處理回調 :

　　　　　//下拉刷新的回調
        function downCallback() {
            $.ajax({
                url: 'xxxxxx',
                success: function(data) {
                    //聯網成功的回調,隱藏下拉刷新的狀態;
                    mescroll.endSuccess(); //無參
                    //設置數據
                    //setXxxx(data);//自行實現 TODO
                },
                error: function(data) {
                    //聯網失敗的回調,隱藏下拉刷新的狀態
                    mescroll.endErr();
                }
            });
        }
        
        //上拉加載的回調 page = {num:1, size:10}; num:當前頁 默認從1開始, size:每頁數據條數,默認10
        function upCallback(page) {
            $.ajax({
                url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num從0開始 ?
                success: function(curPageData) {
                    //聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
                    //mescroll會根據傳的參數,自動判斷列表如果無任何數據,則提示空,顯示empty配置的內容;
                    //列表如果無下一頁數據,則提示無更多數據,(注意noMoreSize的配置)
                    
                    //方法一(推薦): 后台接口有返回列表的總頁數 totalPage
                    //必傳參數(當前頁的數據個數, 總頁數)
                    //mescroll.endByPage(curPageData.length, totalPage);
                            
                    //方法二(推薦): 后台接口有返回列表的總數據量 totalSize
                    //必傳參數(當前頁的數據個數, 總數據量)
                    //mescroll.endBySize(curPageData.length, totalSize);
                            
                    //方法三(推薦): 您有其他方式知道是否有下一頁 hasNext
                    //必傳參數(當前頁的數據個數, 是否有下一頁true/false)
                    //mescroll.endSuccess(curPageData.length, hasNext);
                            
                    //方法四 (不推薦),會存在一個小問題:比如列表共有20條數據,每頁加載10條,共2頁.
                    //如果只根據當前頁的數據個數判斷,則需翻到第三頁才會知道無更多數據
                    //如果傳了hasNext,則翻到第二頁即可顯示無更多數據.
                    //mescroll.endSuccess(curPageData.length);
                    
                    //設置列表數據
                    //setListData(curPageData);//自行實現 TODO
                },
                error: function(e) {
                    //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態
                    mescroll.endErr();
                }
            });
        }

 

================分割線：以上均來自mescroll官網，也是最基本的==============

下邊開始寫一些在使用這個框架時候用到的方法：

mescroll.endSuccess(date.length,false); //這個方法這樣用可以使上拉加載的圈的層隱藏起來，常用於ajax判斷返回的參數是否為空，為空則關閉加載層

<style type="text/css">
  .mescroll{
                position: fixed;
                top: 44px;
                bottom: 37px;
                height: auto;
            }
  </style>
在head中加入這個來自適應整個要滾動的層的高度，其中top的值可以修改成自己標題欄的高度，這樣就不會出現標題欄下出現一大塊空白

mescroll.resetUpScroll(); //這個方法用於下拉刷新重置了因下拉動作而到底的底部顯示，也因此會多回調一次上拉加載（此方法內部調用）,每次下拉刷新回調的地方都有重置一次

htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip"></p>', //上拉加載中的布局，p標簽隨意定義，前邊的是個會轉的圈，這兩行在up中
htmlNodata: '<p class="upwarp-nodata"></p>', //無數據的布局，其中p標簽中可以寫自己想要的文字

noMoreSize: 5, //這個是當頁面顯示不足這個數字的時候不顯示到底定義的文字，比如不滿足5條，則不顯示最下方的“--end--”