之前做移动端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);