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