mescroll.js的使用

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，将其禁用。