码迷,mamicode.com
首页 > Web开发 > 详细

jQuery WeUI实现分页功能

时间:2018-06-11 23:32:25      阅读:1253      评论:0      收藏:0      [点我收藏+]

标签:ext   jquery   query   als   加载   第一步   获取   load   数据加载   

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

jQuery WeUI实现分页功能

标签:ext   jquery   query   als   加载   第一步   获取   load   数据加载   

原文地址:https://www.cnblogs.com/Mrrabbit/p/9170412.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!