jQuery WeUI实现分页功能
Posted 兔子先生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery WeUI实现分页功能相关的知识,希望对你有一定的参考价值。
使用前记得先引入: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实现分页功能的主要内容,如果未能解决你的问题,请参考以下文章