一、官网
二、下载引入
<script src="./js/mescroll.min.js"></script>
<link rel="stylesheet" href="./css/mescroll.min.css">
三、拷贝布局结构
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
<div> //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)
//内容...
</div>
</div>
四、固定mescroll的div高度. 推荐通过定位的方式
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
五、创建mescroll对象
// 下拉刷新
refresh(){
const vm = this;
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: '<p class="upwarp-nodata">-- END --</p>',
// 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, // 是否开启懒加载,默认false
// attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图 src='占位图''/>
// }
// }
});
//下拉刷新的回调
function downCallback() {
if(!vm.firstRefresh){
vm.getDetail();
}
if(vm.firstRefresh){
vm.firstRefresh = false;
}
// console.log("inininindownCallbackdownCallback");
// vm.couponList()
setTimeout(()=>{
mescroll.endSuccess();
},1000)
// $.ajax({
// url: 'xxxxxx',
// success: function(data) {
// //联网成功的回调,隐藏下拉刷新的状态;
// mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的
// //设置数据
// //setXxxx(data);//自行实现 TODO
// },
// error: function(data) {
// //联网失败的回调,隐藏下拉刷新的状态
// mescroll.endErr();
// }
// });
}
},
该插件功能丰富,因本需求只用下拉加载,故只写了下拉加载,其可实现上拉,下拉加载,并带有动画。