jQuery WeUI实现分页功能

时间：2024-06-01 23:35:50

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

相关文章