vue 分页 mescroll 的使用

引入js

// 也可以通过CDN方式引入(七牛):


// jsdelivr的CDN:

页面 div

 //id可以改,而"mescroll"的class不能删 //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)//内容...

创建mescroll对象 :

var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
down: {callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
},
up: {callback: upCallback, //上拉加载的回调//以下是一些常用的配置,当然不写也可以的.page: {num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始size: 10 //每页数据条数,默认10},htmlNodata: '
-- END --
',noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因.toTop: {//回到顶部按钮src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图offset: 1000 //列表滚动1000px才显示回到顶部按钮	},empty: {//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示warpId:	"xxid", //父布局的id (1.3.5版本支持传入dom元素)icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图tip: "暂无相关数据~" //提示},lazyLoad: {use: true // 是否开启懒加载,默认falseattr: 'imgurl' // 标签中网络图的属性名 : }
}
});

处理回调 :

//下拉刷新的回调
function downCallback() {$.ajax({url: 'xxxxxx',success: function(data) {//联网成功的回调,隐藏下拉刷新的状态;mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的//设置数据//setXxxx(data);//自行实现 TODO},error: function(data) {//联网失败的回调,隐藏下拉刷新的状态mescroll.endErr();}});
}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {$.ajax({url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?success: function(curPageData) {//联网成功的回调,隐藏下拉刷新和上拉加载的状态;//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;//列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)//方法一(推荐): 后台接口有返回列表的总页数 totalPage//必传参数(当前页的数据个数, 总页数)//mescroll.endByPage(curPageData.length, totalPage);//方法二(推荐): 后台接口有返回列表的总数据量 totalSize//必传参数(当前页的数据个数, 总数据量)//mescroll.endBySize(curPageData.length, totalSize);//方法三(推荐): 您有其他方式知道是否有下一页 hasNext//必传参数(当前页的数据个数, 是否有下一页true/false)//mescroll.endSuccess(curPageData.length, hasNext);//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据//如果传了hasNext,则翻到第二页即可显示无更多数据.//mescroll.endSuccess(curPageData.length);//结束下拉刷新的 mescroll.endSuccess()无参.//结束上拉加载 curPageData.length必传的原因:1.使配置的noMoreSize 和 empty生效2.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.比传入的totalPage, totalSize, hasNext具有更高的判断优先级3.当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页传totalPage, totalSize, hasNext主要目的是避免方法四描述的小问题//设置列表数据//setListData(curPageData);//自行实现 TODO},error: function(e) {//联网失败的回调,隐藏下拉刷新和上拉加载的状态mescroll.endErr();}});
}

参考网址:

http://www.mescroll.com/api.html?v=66

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！