dropload的使用记录

这次做一个H5的页面，需要用到上拉加载，下拉刷新的功能，在网上看到ximen写的dropload.js可以满足需求（此处致谢作者），但是用的时候还是踩了一些坑，这里记录下来备忘。

一些小问题：
1. me.noData(); 和 me.noData(true);

表示当前无数据，也就是会在下方出现（暂无数据）的表示
me.noData(false);则表示有数据，这时不会显示（暂无数据）

2. 如果不希望用户继续加载数据则需要锁定，这时候需要用 me.lock(); 如果需要开放则需要 me.unlock();

有个比较麻烦的点是：你如果仅仅 me.unlock()了，其实你会发现无法下拉，为啥呢？因为 me.noData(), 这里需要告诉dropload有数据了，继续吧，所以需要调用 me.noData(false)

1. 调用handler

var searchHelper = {
        droploader: null,
         
        params: {
            pageNo: 1,
            pageSize: 10
        },
         
        init: function() {
            var me = searchHelper;
             
            me.droploader = $('.free-list').dropload({
                scrollArea : window,
                loadUpFn: function(wo) {
                    me.refreshFunc(wo);
                },
                loadDownFn: function(wo) {
                    me.loadFunc(wo);
                }
            });
        },
         
        refreshFunc: function(droploader) {
            var me = searchHelper;
             
            me.params.pageNo = 1;
            $.ajax({
                type: 'POST',
                url: '/search/test',
                dataType: 'json',
                data: me.params,
                success: function(result) {
                    //重置
                    droploader.resetload();
                     
                    if(result.statusCode == 0 && result.data && result.data.length > 0) {
                        me.resetRenderFunc();
                        me.renderFunc(result.data);
                        //有数据
                        droploader.noData(false);
                        me.params.pageNo++;
                    } else {
                        //无数据
                        droploader.noData();
                    }
                    //重置
                    droploader.unlock();
                },
                error: function(xhr, type) {
                    console.log('加载数据错误-' + type);
                    droploader.resetload();
                }
            });
        },
         
        loadFunc: function(droploader) {
            var me = searchHelper;
             
            $.ajax({
                type: 'POST',
                url: '/search/test',
                dataType: 'json',
                data: me.params,
                success: function(result) {
                    if(result.statusCode == 0 && result.data && result.data.length > 0) {
                        me.renderFunc(result.data);
                    } else {
                        //锁定
                        droploader.lock();
                        //无数据
                        droploader.noData();
                    }
                    //重置
                    droploader.resetload();
                    me.params.pageNo++;
                },
                error: function(xhr, type) {
                    console.log('加载数据错误-' + type);
                    droploader.resetload();
                }
            });
        },
         
        renderFunc: function(data) {
            var info = '';
            $.each(data, function(index, entity) {
              info += '<li>' + entity + '</li>';
            });
            $('.free-list ul').append(info);
        },
         
        resetRenderFunc: function() {
            $('.free-list ul').empty();
        }
};

2. [代码]外部重新加载数据的方式

$('#btn').click(function() {
        $('.free-list ul').empty();
        searchHelper.params.pageNo = 1;
        // 解锁
        searchHelper.droploader.unlock();
        searchHelper.droploader.noData(false);
        searchHelper.droploader.resetload();
    });

转自：simananzhui