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