使用前記得先引入：weui.min.css、jquery-weui.min.css、jquery-weui.min.js

第一步：將下面的代碼放在body結束標簽上面(這個位置可以自己按需求放)

<div class="weui-loadmore" id="loading">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加載</span>
   </div>

我這邊是給元素多加了個id 因為這個元素默認是顯示的，所以一開始我們需要先隱藏，上拉加載的時候在顯示這個元素。

第二步：綁定上拉事件

var loading = false;  //狀態標記 這個變量主要是用來控制觸發次數，官網也有說明，事件可能會觸發多次
    $(document.body).infinite().on("infinite", function() {
        $("#loading").css("display","block");//顯示 加載中圖標
        if(loading) return;
        loading = true;
        if(page<=countPage){//如果當前頁小於總頁面
            getbalancelist();
        }
 
else{
            $(document.body).destroyInfinite();//到最後一頁時，銷毀它
            $("#loading>i").css("display","none");
            $("#loading>span").html("到底啦~").css("color","#BDBDBD");
        }
    });

第三步：加載數據

var countPage=1;//總頁數
    var page=1;//當前頁
    var pageSize=8;//每頁顯示幾條
    //獲取數據
    function
 
 getbalancelist(){
        init.Ajax("GET", "url", {page:page,num:pageSize}, function (res) {
            //這裏計算出總頁數。。一般是後臺給的
            countPage=Math.ceil((res.data.totalCount)/pageSize);
             
            //處理數據部分 .......
             
             loading = false;//會多次觸發，所以 需要請求完成數據 才能繼續觸發
            
            $("#loading").css("display","none");//數據加載完隱藏加載提示
        })
        page++;
    }
        

總結：使用這個組件遇到的坑，主要就是，你上拉一下，會多次觸發事件(會同時執行多次加載數據的方法)，所以需要通過loading這個變量來控制 當上一次觸發的事件執行結束後，才能執行加載數據的方法。官網地址：http://jqweui.com/extends#infinite

jQuery WeUI實現分頁功能