dropload.js插件下拉刷新和上拉加载使用详解

我们来详细讲解一下“dropload.js插件下拉刷新和上拉加载使用详解”的完整攻略。

简介

Dropload.js是一款移动端网页下拉刷新和上拉加载的插件，它可以很方便地帮助我们实现下拉刷新和上拉加载的功能。下面我们来详细讲解一下这个插件的使用方法。

安装和引入

首先，我们需要将dropload.js插件引入到网页中，可以直接下载js文件，也可以使用CDN。然后在html页面中引用：

<script src="dropload.min.js"></script>

使用方法

基本使用

Dropload.js的最基本使用方法如下：

$('.dropload-container').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        // TODO 加载更多数据的逻辑
        me.resetload();
    }
});

其中，.dropload-container是我们要添加下拉刷新和上拉加载效果的容器，scrollArea指定滚动的区域，loadDownFn是下拉到了底部之后要执行的函数。可以在里面写加载更多数据的逻辑。

高级使用

Dropload.js还提供了一些高级的使用方法，比如可以在刷新时显示loading动画、支持上拉加载更多数据等。下面是一个完整的使用示例：

$('.dropload-container').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'data.json',
            dataType: 'json',
            success: function(data){
                // TODO 将数据添加到页面上
                me.resetload();
            },
            error: function(xhr, type){
                alert('加载更多失败！');
                me.resetload();
            }
        });
    },
    domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
    }
});

可以看到，这个例子中添加了四个参数，分别是：domClass指定上拉加载会用到的样式名，domRefresh指定上拉加载的提示文字，domLoad指定正在加载的提示文字，domNoData指定所有数据都已经加载完的提示文字。

示例说明

下面我们来通过两条示例演示一下如何使用这个插件。

示例一：简单的下拉刷新

在此示例中，我们只需要在下拉到一定程度时触发刷新，然后加载最新的数据即可。

$('.dropload-container').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        // TODO 加载最新的数据
        me.resetload();
    },
    domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">↑下拉刷新</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>刷新中...</div>',
    }
});

示例二：带有上拉加载更多的功能

在此示例中，我们除了具备刚才的下拉刷新功能，还需要在下拉到底部时触发加载更多，然后显示最新的数据。

$('.dropload-container').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'data.json',
            dataType: 'json',
            success: function(data){
                // TODO 将数据添加到页面上
                me.resetload();
            },
            error: function(xhr, type){
                alert('加载更多失败！');
                me.resetload();
            }
        });
    },
    domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">↑下拉刷新</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>刷新中...</div>',
    },
    domUp : {
        domClass   : 'dropload-up',
        domRefresh : '<div class="dropload-refresh">↓上拉加载更多</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
    }
});

可以看到，我们在domUp中添加了上拉加载更多所需要的四个参数，这样就可以在下拉到底部时自动加载新的数据了。

总结

这就是使用Dropload.js实现下拉刷新和上拉加载的详细攻略，希望能对大家有所帮助。