jQuery WeUI實現分頁功能

使用前記得先引入：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