移動端上拉加載下拉刷新插件-mescroll.js插件

官網地址是：http://www.mescroll.com

 

 下載mescroll.js插件。

 

  在頁面中引入以下兩個文件：

 

　　mescroll.min.css

 

　　mescroll.min.js

html部分代碼

    <div class="container">
        <div id="mescroll" class="my-address mescroll">
            <div id="addressList" class="address-list">
　　　　　　　　　<!-- 這裏是ajax返結果list -->
            </div>
        </div>
    </div>

 須要注意的地方是頁面的container必須有固定高度，不然上拉無效。

    var pageNum = 1; //頁碼
    var size = 10;  //每頁數據固定條數
    //建立MeScroll對象
    var mescroll = new MeScroll("mescroll", {
        down: {
            isLock  // 鎖定下拉功能            //callback: upCallback //下拉刷新的回調,別寫成downCallback(),多了括號就自動執行方法了
        },
        up: {
            callback: upCallback //上拉加載的回調
            ,
            empty: {
                //列表第一頁無任何數據時,顯示的空提示佈局; 需配置warpId或clearEmptyId才生效;
                warpId:'mescroll', //父佈局的id; 若是此項有值,將不使用clearEmptyId的值;
                icon: null, //圖標,默認null
                tip: "暫無相關數據~", //提示
                btntext: "", //按鈕,默認""
                btnClick: null, //點擊按鈕的回調,默認null
            },
        }
    });

    //下拉刷新的回調
    function downCallback() {

    }
    //上拉加載的回調 page = {num:1, size:10}; num:當前頁 默認從1開始, size:每頁數據條數,默認10
    function upCallback(page) {
        $.ajax({
            url: '/screen/pickUpPoint/findPickUpPointList?current='+pageNum+'&pageSize='+size,
            dataType:'json',
            type:'GET',
            success: function(json) {
                console.log(json)
                var data = json.data;
                var _html = $('#addressListTmpl').render(data);
                $('#addressList').append(_html);
                mescroll.endByPage(data.records.length, data.totalPage);
                pageNum++
            },
            error: function(e) {
                //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態
                mescroll.endErr();
            }
        });
    }

大概就是這麼個流程，具體詳細的還需看官方文檔給出的，這裏只是作一個簡單的效果！