移动端翻页插件dropload.js（支持Zepto和jQuery）

下面是“移动端翻页插件dropload.js”的完整攻略。

什么是dropload.js

dropload.js 是一款能帮助我们实现移动端下拉刷新和上滑加载更多的 jQuery/Zepto 插件。它的核心功能就是在页面滚动到底部后自动加载下一页内容，这对于移动端网站来说非常实用。

如何使用dropload.js

首先，你需要引入 dropload.js 文件和 Zepto/jQuery 库。

<script src="https://cdn.jsdelivr.net/npm/zepto/dist/zepto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dropload/dist/dropload.min.js"></script>

然后，初始化 dropload.js。

$('#content').dropload({
  // 下拉刷新
  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>'
  },
  loadDownFn: function(me){
    $.ajax({
      type: 'GET',
      url: 'api/getdata',
      dataType: 'json',
      success: function(data){
        // do something
        // 每次加载完后，必须执行
        me.resetload();
      },
      error: function(xhr, type){
        // 每次加载完后，必须执行
        me.resetload();
      }
    });
  }
});

dropload.js 的详细说明

初始化

初始化 dropload.js 的代码如下。

$('#content').dropload(options);

其中 options 参数是一个对象，用于对 dropload.js 进行参数配置。常用的参数如下。

参数	类型	默认值	说明
scrollArea	window	window	滚动区域的容器，可以是 window 或某个 DOM 元素
domDown	object	-	上滑加载更多的 DOM 元素配置
domUp	object	-	下拉刷新的 DOM 元素配置
autoLoad	boolean	true	是否自动加载

上滑加载更多的配置

上滑加载更多是 dropload.js 的主要功能之一，因此我们需要对它进行详细配置。常用的参数如下。

参数	类型	默认值	说明
domClass	string	-	DOM 元素的类名
domRefresh	string	-	初始状态
domLoad	string	-	加载中状态
domNoData	string	-	全部加载完成后的提示信息
loadDownFn	function	-	触发加载时的回调函数

一般情况下，我们只需要设置 domRefresh、domLoad 和 loadDownFn 即可。

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>'
},
loadDownFn: function(me){
  // TODO: 请求数据
}

在 loadDownFn 函数中，我们可以使用 AJAX 或其他方式请求下一页数据。我们需要在请求成功后调用 me.resetload() 函数来重置 dropload.js 状态。

loadDownFn: function(me){
  // TODO: 请求数据
  $.get('/api/getdata', function(data){
    // TODO: 处理数据
    me.resetload();
  });
}

下拉刷新的配置

下拉刷新的配置与上滑加载更多的配置类似。常用的参数如下。

参数	类型	默认值	说明
domClass	string	-	DOM 元素的类名
domRefresh	string	-	初始状态
domUpdate	string	-	释放即可刷新状态
domLoad	string	-	加载中状态
threshold	number	70	下拉刷新的临界值，单位为像素
loadUpFn	function	-	触发刷新时的回调函数

需要注意的是，下拉刷新的回调函数名为 loadUpFn。

示例代码如下。

domUp: {
  domClass: 'dropload-up',
  domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
  domUpdate: '<div class="dropload-update">↑释放即可刷新</div>',
  domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  threshold: 70
},
loadUpFn: function(me){
  // TODO: 请求数据
  $.get('/api/getdata', function(data){
    // TODO: 处理数据
    me.resetload();
  });
}

示例说明

下面给出两个示例说明。

示例一：使用 AJAX 请求下一页数据

$('#content').dropload({
  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>'
  },
  loadDownFn: function(me){
    $.ajax({
      type: 'GET',
      url: 'api/getdata?page=' + me.opts.pageIndex,
      dataType: 'json',
      success: function(data){
        if(data.length > 0){
          // TODO: 渲染数据
          // 每次加载完后，必须执行
          me.resetload();
          me.opts.pageIndex++;
        }else{
          // 没有更多数据了
          me.lock();
          me.noData();
        }          
      },
      error: function(xhr, type){
        // 每次加载完后，必须执行
        me.resetload();
      }
    });
  }
});

示例二：使用 Promise 请求下一页数据

function fetchData(pageIndex){
  return new Promise(function(resolve, reject){
    $.ajax({
      type: 'GET',
      url: 'api/getdata?page=' + pageIndex,
      dataType: 'json',
      success: function(data){
        if(data.length > 0){
          // TODO: 渲染数据
          resolve(true);
        }else{
          // 没有更多数据了
          resolve(false);
        }          
      },
      error: function(xhr, type){
        reject(xhr);
      }
    });
  });
}

$('#content').dropload({
  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>'
  },
  loadDownFn: function(me){
    fetchData(me.opts.pageIndex).then(function(hasData){
      if(hasData){
        // 每次加载完后，必须执行
        me.resetload();
        me.opts.pageIndex++;
      }else{
        // 没有更多数据了
        me.lock();
        me.noData();
      }
    }).catch(function(err){
      console.log(err);
      // 每次加载完后，必须执行
      me.resetload();
    });
  }
});

以上就是 dropload.js 的完整攻略。希望对您有所帮助。