dropload.js 填坑之lock

在使用dropload插件時，如果向下滑到最後沒有數據不調用lock函數，dropload還是會觸發加載事件。可是當我們加上lock與unlock邏輯之後發現，在下拉加載時頁面無法迴歸原樣。

代碼邏輯結構圖

var dropload = $('.xxxx').dropload({
    domUp:{}
    domDown:{}
    loadUpFn:function(me){
        //調用加載數據函數
        loadData(page,rowlist);
    }
    loadDownFn:function(me){
        //調用加載數據函數
        loadData(page,rowlist);
    }
});

//定義：加載數據函數
function loadData(page,rowlist){
    $.ajax({
        success:function(response){
            //將數據轉換爲模板
            template(response.data);               
            if(請求數據條數 大於 查詢結果的數據條數){
                dropload.lock();
                dropload.noData();
            }else{
                dropload.unlock();
                dropload.noData(false);
            }

            dropload.resetload();
        }

    });
}
//定義：加載模板函數
function template(data){
    ...
    return template;
}

邏輯上絕對是沒有太大毛病的，可是當執行unlock()函數後，在調用下拉刷新loadUpFn ，刷新圖標就無法回去了。

通過閱讀源碼我們發現。

// 解鎖
    MyDropLoad.prototype.unlock = function(){
        var me = this;
        // 簡單粗暴解鎖
        me.isLockUp = false;
        me.isLockDown = false;
        // 爲了解決DEMO5中tab效果bug，因爲滑動到下面，再滑上去點tab，direction=down，所以有bug
        me.direction = 'up';
    };

// 重置
    MyDropLoad.prototype.resetload = function(){
        var me = this;
        if(me.direction == 'down' && me.upInsertDOM){
            me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
                me.loading = false;
                me.upInsertDOM = false;
                $(this).remove();
                fnRecoverContentHeight(me);
            });
        }else if(me.direction == 'up'){
            me.loading = false;
            // 如果有數據
            if(me.isData){
                // 加載區修改樣式
                me.$domDown.html(me.opts.domDown.domRefresh);
                fnRecoverContentHeight(me);
                fnAutoLoad(me);
            }else{
                // 如果沒數據
                me.$domDown.html(me.opts.domDown.domNoData);
            }
        }
    };

當我們調用unlock後，插件的變量direction 爲up，可是在resetload中會判斷direction的值，根據direction的值設置動畫效果。

直接上手改源碼，不用判斷方向，只要resetload那麼下拉動畫就會重置。
 

// 重置
    MyDropLoad.prototype.resetload = function(){
        var me = this;
        if (me.upInsertDOM){
            me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
                me.loading = false;
                me.upInsertDOM = false;
                $(this).remove();
                fnRecoverContentHeight(me);
            });
        }
        if(me.direction == 'down' && me.upInsertDOM){

        }else if(me.direction == 'up'){
            me.loading = false;
            // 如果有數據
            if(me.isData){
                // 加載區修改樣式
                me.$domDown.html(me.opts.domDown.domRefresh);
                fnRecoverContentHeight(me);
                fnAutoLoad(me);
            }else{
                // 如果沒數據
                me.$domDown.html(me.opts.domDown.domNoData);
            }
        }
    };