經過Scroller.js製做上拉加載和下拉刷新

以前作移動端webAPP開發,一直是用的IScroll來作滾動列表,可是IScroll沒有直接提供上下拉刷新的功能,雖然咱們基於IScroll本身實現了一套,但IScroll依然有很多bug.就拿點擊來講吧,在某些型號的手機上會連續觸發2次click.緣由是配置項的{click:true}對某些手機有效,某些手機無效.

最近在網上發現了Scroller.js這個庫,看了一下API,咱們須要的功能都有,如下是一個可上下拉刷新的滾動列表實現:

注:上下拉刷新是Scroller.js的插件功能,因此官方文檔沒有詳細的API

// Prevents viewport bouncing iOS
document.addEventListener('touchmove', function (e) {e.preventDefault();}, false);

var scrollerConfig = {
	useCSSTransition: true,
        gpuOptimization: true,
	pullToRefresh :true,
	pullToRefreshConfig:{
		labelPull:"下拉刷新",
		labelClick:"點擊刷新",
		labelRelease:"釋放刷新",
		labelUpdate:"刷新中..."
	},
	onPullToRefresh : function(e){
		setTimeout(function () {
		   e();
	        }, 1500);
	},
	pullToLoadMore:true,
	pullToLoadMoreConfig:{
		labelPull:"上拉加載",
		labelClick:"點擊加載",
		labelRelease:"釋放加載",
		labelUpdate:"加載中..."
	},
	onPullToLoadMore:function(e){
		setTimeout(function () {
		    e();
	        }, 1500);
        }
};
		
window.scroller = new Scroller('#wrapper', scrollerConfig);

官網: http://scrollerjs.com/