weui實現滾動加載的效果

weui是微信公司提供的一個UI框架，在H5開發中一些組件可以直接使用。weui文檔地址：http://www.jqweui.cn/components

使用weui，需要引入weui.css和jquery-weui.min.css，還有jquery.min.js和jquery-weui.min.js。庫文件下載地址：https://github.com/LuoYiHao/front-end-lib/tree/master/weui

為了實現滾動加載的效果，首先實現加載列表的函數：

function getPendingList(pageNum) {

    //請求消息

    $.ajaxDirect("/list?pageSize=10&pageNum="+pageNum,'GET',{},

        function(data){

            list = data.data.list

            lastPage = data.data.lastPage

 
           
           
             　　　　　　　for(var i = 0;i < list.length;i++){ 
            
           
                             $("#tab1").append( 
            
           
                                 '<div class="item">\ 
            
           
                                     <img src="../../images/[e-mail]" alt="" class="icon">\ 
            
           
                                     <div class="personal-info">\ 
            
           
                                         <div>'+timestampToTime(list[i].createTime,16)+'</div>\ 
            
           
                                         <div>\ 
            
           
                                             <span>'+list[i].name+'</span>\ 
            
           
                                             <span class="peopleNum">'+list[i].telephone+'</span>\ 
            
           
                                         </div>\ 
            
           
                                     </div>\ 
            
           
                                     <div class="status">待審批</div>\ 
            
           
                                     <div class="item-info">'+pack(list[i])+'</div>\ 
            
           
                                 </div>' 
            
           
                             ) 
            
           
                         } 
            
           
             　　　　　　　loading= false 
            
           
 
           
                         if(pageNum==lastPage||lastPage==0){ 
            
           
                             flag = false 
            
           
                             $('.tab-load').hide() 
            
           
                         } 
            
           
         

        },

        function(){

            $.toast("請求失敗", "text")

        }

    )

}

進入頁面先調用接口加載10條數據，並獲取當前數據庫頁數為lastPage。

在script執行開始前先定義變量：

var pageNum = 1
var lastPage
getPendingList(pageNum)
var list
var flag = true
var loading = false

然后實現滾動加載：

// 上滑加載更多
$(document.body).infinite().on("infinite", function () {
　　if(loading) return
　　loading = true
    pageNum++
    if(pageNum<=lastPage){
        getPendingList(pageNum)
    }else{
        setTimeout(function() {
　　　　　　　flag = false
            $('.tab-load').hide()
        }, 500)
    }
})

1.infinite的意思是無限的，當頁面觸發infinite事件時，頁碼加一，若未超過總頁數，則發起請求，請求到的數據直接append到之前的數據后面。

2.若頁碼超過總頁數，則不再發起請求，並隱藏加載動圖。

3.flag是用於判斷數據是否全部加載完，從而控制loading組件的顯示隱藏。

加載動圖代碼如下：

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

注意一點，因為插件並不知道你是否正在加載，所以只要滾動到距離底部 50px 以內都會觸發事件。因此infinite事件可能會觸發多次。

需要自己來控制不要同時進行多個加載。可以參考上面的代碼通過一個 loading 標記位來控制。

更詳細的用法請直接查看weui文檔，鏈接為http://www.jqweui.cn/extends#infinite。

weui的github地址為https://github.com/Tencent/weui.js。