经过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/