dropload.js 的使用和遇到的坑

做手机端需求要有一个下拉刷新和上拉加载更多的功能，本猿猿使用了网上查到的插件dropload.js，但是在使用的时候一堆坑，我只能修改dropload.js的脚本。

坑一、如果你的页面是有tab的，刷新的时候dropload-up没有关闭的时候，就点击下一个tab就会出现dropload-up关闭不了了。

坑二、这不算是坑，是我自己不熟悉导致的问题，页面没有更多数据的时候我们用me.lock()锁定，，这样子页面就被锁定了连下拉刷新也用不了了，后来我看了脚本后发现可以锁定是上拉加载更多还是锁定下拉刷新，这时候我们只要用me.lock('down'); // 锁定  就可以了，这样子下拉刷新还可以使用。

坑三、因为有tab,切换的时候你会发现数据没有变，实际上是数据一直append到后面了之前的数据还在，这时候我们只要使用$("#orderlist").children().remove(); //或者$("#list").html("");一样的功能，清空之前的数据。 
        droploader.unlock();
        droploader.noData(false);
        droploader.resetload();就可以了

坑四、本以为清空了数据就行了，但是拼进去的数据还是错，那是因为分页是累加的，在坑三的时候我们的page也要一起还原为0；

下面就是我实现的主要代码：

html的页面

<div class="g-context_V1" id="content">
            <div id="orderlist">

</div></div>

1、我们初始化dropload，先写一个方法

/* 上拉加载、下拉刷新方法  */
function droploadMethod() {
    droploader = $('#content').dropload({
        scrollArea: window,
        //上拉加载  
        loadDownFn: function(me) {
            var flag = false;
            getorderlist(me, flag);
        },
        //下拉刷新  
        loadUpFn: function(me) {
            var flag = true;
            getorderlist(me, flag);
        }
    });
}

2、进来页面的时候初始化一下

3、在你的ajax的方法里,page你可以定一个全局的，这里进来page不断地累加，实现上拉加载更多的分页累加。

但是下拉刷新的时候要把pege还原

4、用一个延迟装置，让加载动画看起来更好点，数据回来后，如果是下拉刷新的要把列表的数据清空，不然回来的数据又被append后面去了就会有问题。如果分页已经到达最大页了，就不能再做上拉加载更多的，我们就要锁定。

5、切换tab的时候要进行数据还原，不然就会出现数据一直append，上面已经说过了。

6、最后最重要的，我做了插件修改，可以看到dropload.js的脚本里有一个 resetload的方法，改写后下拉刷新就不会有问题了，我改写的原理是重置的时候先看看dropload-up是否存在页面里，如果存在我就remove调，就是这么简单，如果没有remove掉页面就会出现锁死的状态全部用不了，要么就是出现关闭不了的dropload-up。