app-framework学习--公用加载、刷新

app-framework学习–公用加载、刷新

---

作者：木尘2015-02-05
交流群：333492644

scrooller,上拉加载，下拉刷新（2.2）。群里有人问，我就给大家分享下吧！

/**
 * @Author:      muchen
 * @DateTime:    2015-03-04 10:30:10
 * @Description: add下拉刷新 add上啦加载分页
 * @param:       myScroller Scroller对象
 * @param:       emptyID 刷新时要清空的div id
 * @param:       useFun 刷新加载需要调用的方法
 */
function addScroller(myScroller,emptyID,useFun){
    if(page == 1){
        myScroller.scrollToTop();
    }
    //Scroller add下拉刷新
    myScroller.addPullToRefresh();
    //Scroller add上啦加载分页
    myScroller.addInfinite();
    myScroller.runCB=true;
    var hideClose;
    $.unbind(myScroller, "refresh-release");
    $.bind(myScroller, "refresh-release", function () {
        var that = this;
        clearTimeout(hideClose);
        hideClose = setTimeout(function (){
            $("#" + emptyID).empty();
            page = 1;
            hasMorePage = true;
            eval(useFun);
            that.hideRefresh();
        }, 1600);
        return false; //tells it to not auto-cancel the refresh
    });
    //滚动过去，下拉将不再起作用！手动取消拉动刷新
    $.bind(myScroller, "refresh-cancel", function () {
        clearTimeout(hideClose);
    });

    myScroller.enable();
    /*修复afui refresh事件会触发infinite事件bug*/
    $(document.body).unbind("touchmove");
    $(document.body).bind("touchmove", function(e) {
        if (touch.y1 - touch.y2 <= 0) {
            $("#infinite").hide();
        } else {
            $("#infinite").show();
        }
    });
    $.unbind(myScroller, "infinite-scroll");
    $.bind(myScroller, "infinite-scroll", function () {
        var self = this;
        if (!hasMorePage) {//没有数据了，则直接返回，不在下拉
            self.clearInfinite();
            //$("#noItem")[0] ? $("#" + emptyID).append('') : $("#" + emptyID).append('<div id="noItem"><span>没有更多数据了</span></div>');
            return;
        }
        if($("#infinite").length==0){
            $(self.el).append('<div id="infinite"><div class="pullDown loading"><span class="pullDownIcon"></span><span class="pullDownLabel">正在加载...</span></div></div>');
            $.unbind(myScroller, "infinite-scroll-end");
            $.bind(myScroller, "infinite-scroll-end", function () {
                //if(isScrollDown){return false;};
                $.unbind(myScroller, "infinite-scroll-end");
                self.scrollToBottom();
                setTimeout(function () {
                    $(self.el).find("#infinite").remove();
                    self.clearInfinite();
                    eval(useFun);
                    page++;
                    self.scrollToBottom();
                }, 1600);
            });
        }else {
            return;
        }
    });
}
/**
 * @Author:      muchen
 * @DateTime:    2015-03-04 10:30:10
 * @Description: add下拉刷新
 * @param:       myScroller Scroller对象
 * @param:       clearnFun刷新时要清空方法
 * @param:       useFun 刷新加载需要调用的方法
 */
function addScrollerRefresh(myScroller,clearnFun,useFun){
    myScroller.scrollToTop();
    //Scroller add下拉刷新
    myScroller.addPullToRefresh();
    //向下拉动出现下拉开始刷新
    var hideClose;
    myScroller.runCB=true;
    $.unbind(myScroller, "refresh-release");
    $.bind(myScroller, "refresh-release", function () {
        var that = this;
        clearTimeout(hideClose);
        hideClose = setTimeout(function (){
            eval(clearnFun);
            eval(useFun);
            that.hideRefresh();
        }, 2000);
        return false; //tells it to not auto-cancel the refresh
    });
    //滚动过去，下拉将不再起作用！手动取消拉动刷新
    $.bind(myScroller, "refresh-cancel", function () {
        clearTimeout(hideClose);
    });
    myScroller.enable();
}

使用方法如下：
1.定义两个全局变量：

var page = 1; 当前页数
var hasMorePage = true;//默认还有分页

2.创建：Scroller对象

 var _myScroller =  $("#hello").scroller({
        verticalScroll : true,
        horizontalScroll : false,
        vScrollCSS: "afScrollbar",
        autoEnable : true
    });

3.使用：

addUseScroller(_myScroller,'helloList','getHelloList()');