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 getActivityList(pageNum) {

    //请求消息

    if(true){

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

            function(data){

                list = data.data.list

                lastPage = data.data.lastPage

            },

            function(){

                aiui.toast("请求失败", "text")

            }

        )

    }

}

进入页面先调用接口加载10条数据，并获取当前数据库页数为lastPage。

var pageNum = 1
getActivityList(pageNum)
var list
var lastPage

然后实现滚动加载：

// 上滑加载更多
$(document.body).infinite().on("infinite", function () {
    pageNum++
    if(pageNum<=lastPage){
        getActivityList(pageNum)
    }else{
        setTimeout(function() {
            $('.weui-loadmore').hide()
        }, 500)
    }
})

1.infinite的意思是无限的，当页面触发infinite事件时，页码加一，若未超过总页数，则发起请求，请求到的数据直接append到之前的数据后面。

2.若页码超过总页数，则不再发起请求，并隐藏加载动图。

加载动图代码如下：

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

更详细的用法请直接查看weui文档，链接为http://www.jqweui.cn/extends#infinite。

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

来源：https://www.cnblogs.com/luoyihao/p/12020626.html