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);
            }
        }
    };