1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 移动端上拉加载下拉刷新插件-mescroll.js插件

移动端上拉加载下拉刷新插件-mescroll.js插件

时间:2022-01-13 20:36:53

相关推荐

移动端上拉加载下拉刷新插件-mescroll.js插件

官网地址是:

下载mescroll.js插件。

在页面中引入如下两个文件:

mescroll.min.css

mescroll.min.js

html部分代码

<div class="container"><div id="mescroll" class="my-address mescroll"><div id="addressList" class="address-list"><!-- 这里是ajax返结果list --></div></div></div>

需要注意的地方是页面的container必须有固定高度,否则上拉无效。

var pageNum = 1; //页码var size = 10; //每页数据固定条数//创建MeScroll对象var mescroll = new MeScroll("mescroll", {down: {isLock // 锁定下拉功能 //callback: upCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了 },up: {callback: upCallback //上拉加载的回调 ,empty: {//列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;warpId:'mescroll', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;icon: null, //图标,默认nulltip: "暂无相关数据~", //提示btntext: "", //按钮,默认""btnClick: null, //点击按钮的回调,默认null },}});//下拉刷新的回调function downCallback() {}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {$.ajax({url: '/screen/pickUpPoint/findPickUpPointList?current='+pageNum+'&pageSize='+size,dataType:'json',type:'GET',success: function(json) {console.log(json)var data = json.data;var _html = $('#addressListTmpl').render(data);$('#addressList').append(_html);mescroll.endByPage(data.records.length, data.totalPage);pageNum++},error: function(e) {//联网失败的回调,隐藏下拉刷新和上拉加载的状态mescroll.endErr();}});}

大概就是这么个流程,具体详细的还需看官方文档给出的,这里只是做一个简单的效果!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。