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/driver@3x.png" 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。