mescroll.js的官网地址:http://www.mescroll.com/index.html
mescroll.js分为js版和vue版,这里介绍一下使用js版时遇到的问题。
1.使用原因
首先说一下使用这个插件的原因,一是这个插件确实好用(整明白后),有各种配置项,能满足大部分需求,二是它可以在切换标签时,重置下拉加载,即可以实现实例化一个mescroll实例,但切换标签时依然可以实现下拉加载的效果,这是我最需要的,像之前使用的dropload则需要自己实现这个效果,那这对于我这个菜鸟来说那太困难也太麻烦了,所以综上选择了mescroll.js
2.再来说一下坑,需要使用mescroll.js的布局
2.1这是最坑的,也怪我没仔细看官网的说明:
需要在使用mescroll.js的页面加上上图中的css样式,并且class的名字不能改,只能为mescroll,id倒是可以改。
2.2:使用回到顶部按钮时的问题:
这个是我页面切图的问题,当你点击回到顶部的按钮不生效时,可以查看你的那个按钮是否有如下的css
img{
pointer-events: none; //元素永远不会成为鼠标事件的target
}
有这个的话,永远也点不到那个按钮。
3.配置项
var mescroll = new MeScroll("mescroll", {
down: {
use:false
}
//上拉加载的配置项
up: {
callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty: {
icon: "../res/img/mescroll-empty.png", //图标,默认null
tip: "暂无相关数据~", //提示
btntext: "去逛逛 >", //按钮,默认""
btnClick: function(){//点击按钮的回调,默认null
alert("点击了按钮,具体逻辑自行实现");
}
},
clearEmptyId: "dataList", //相当于同时设置了clearId和empty.warpId; 简化写法;默认null; 注意vue中不能配置此项
toTop:{ //配置回到顶部按钮
src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
},
lazyLoad: {
use: true // 是否开启懒加载,默认false
}
}
});
这里列出的只是部分配置项,具体的可去官网下载案例查看。
说明一点:插件默认上拉刷新和下拉加载功能都是开启的,如果哪个不需要,则可使用use:false,将其禁用。