weui实现滚动加载的效果-CFANZ编程社区

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 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。