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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章