通过Scroller.js制作上拉加载和下拉刷新

[url]http://my.oschina.net/wolfx/blog/632549[/url]
之前做移动端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);

官网: [url]http://scrollerjs.com/[/url]