基于JQuery实现移动端上拉加载、下拉刷新

需求背景 

        当下的web前端基本上是使用主流框架（vue、react、angular）为主，但是，在一些比较老的需要一直维护的项目中依然还活跃着html+css+JQuery的身影。JQuery相信我们做前端的同学应该都了解，核心思想就是write less,do more，具体的就不介绍了，懂得都懂（手动狗头表情）。

        嚯~，我就在工作中呢遇到了上面说的多年前的项目代码中有一个小的单页面需求，虽然是独立的需求，但考虑后还是决定不用vue了，就在项目代码中新建个文件夹，基于html，JQuery去开发了。

        需求其实很简单，概括一句就是一个接口返回的列表数据需要分页加载、下拉刷新。看到这个需求，首先习惯性的就是想直接套用组件方便快捷一气呵成，但是没用框架，没的办法，就查了一些基于jQuery的插件。https://www.jq22.com/，jQuery的老插件库了。

        dropload，不错，好用。下面简单介绍下这东西怎么玩的。

如何使用

首先在你要使用的html中引入jquery.min.js【推荐2.x的版本】

其次下载dropload.min.js，dropload.css 放在你的项目目录中或者自己的CDN服务器上并引入

 <link rel="stylesheet" href="../dropload/dropload.css">


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

引入后，body中的代码dom结构如下：

<!-- 外部容器滚动的区域 -->
<div id="main">
    <div class="list">
        <!-- 你的列表内容 -->
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

注意要给外部滚动容器设置高度（根据你项目的实际情况），我这边项目是

#main{
    height: calc(100vh - 44px);
    overflow-y: auto;
}

DOM 结构和样式写好以后就是主要的js部门了，直接上代码一目了然

var load = $("#main").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>',
  },
  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>',
  },
  // distance  	拉动距离
  threshold: 400, //提前加载的具体默认是加载区高度2/3，我这里设置的400
  autoLoad: false, //是否自动加载，
  //上拉加载
  loadDownFn: function(load) {
    getData();
  },
  //下拉刷新
  loadUpFn: function(load) {
    //下拉刷新这里记得重置一下入参哦
    getData()
  },
});

//你的请求数据方法
function getData(){
    $.ajax({
      url: '接口',
      type: "GET",
      data: {
       //分页参数
      },
      headers: {},
    })
      .success(function(res) {
            //这里是你的渲染dom方法，渲染完成后一定要加下面👇🏻这个
                load.resetload();
            //如果没数据，执行 load.lock();load.noData();
             
      })
      .fail(function(err) {
        load.resetload();
        //这里请求失败也执行一下
      });
}

至此，上拉加载、下拉刷新的功能就实现了。

需要注意的点

1、下拉刷新和上拉加载的一些字体样式图标样式是可以根据你的需求修改，具体参照实际的类名去覆盖样式就行

2、执行load.resetload() 方法的时候，一定在接口请求返回后执行，不能像下面这样简单放在getData()方法后执行，这样会导致页面下拉刷新后，继续滚动页面上拉加载会失效。因为getData()是异步的，放在这个位置，请求还没完成就执行了，一定要渲染完成后执行load.resetload()

 loadDownFn: function(load) {
    getData();

    load.resetload()
  },
  //下拉刷新
  loadUpFn: function(load) {
    //下拉刷新这里记得重置一下入参哦
    getData()

    load.resetload()
  },

以上就是全部内容啦，有什么问题可以留言咨询，或者文中有什么不对的地方欢迎大家留言指正，共同学习~