H5中实现加载更多的逻辑及代码执行。

H5中加载更多的逻辑总结：

1、首先，需要三个底部的提示，分别是“加载中”、“--我是有底线的--”、“暂时没有记录”，当然，这三句话根据不同的项目，可以自定义。具体代码例子如下：

 <div class="nowStartLoading" v-if="nowloading">
      <mt-spinner type="fading-circle" :size="25"></mt-spinner>
      <span>加载中···</span>
    </div>
    <div class="bottomWord" v-if="noData">--我是有底线的--</div>
    <div class="bottomWord" v-if="firstNoData">暂时没有推荐记录~</div>

2、根据如上情况，我们需要定义如下几个变量，来进行相应的操作。具体变量及说明如下：

ifHasMoreData: true,  //是否有更多数据
nowloading: false,  //正在加载的动画
noData: false,   //非第一次加载没有数据
firstNoData: false   //第一次加载就没有数据

3、加载具体数据的函数处

 that.nowloading = false; // 默认请求完数据，都关闭加载动画。 当然，打开动画是在加载更多的函数地方打开动画。
 if (res.data.length == 0 && that.page == 1) {   //如果是第一页，并且数据为空
          that.ifHasMoreData = false;
          that.noData = false;
          that.firstNoData = true;

 } else if (res.data.length >= 0 && res.data.length < 10) { // 如果是数据大于等于0，并且加载数据小于我们请求的每页的数据，则该push，同时我们判断，此时数据加载完了
          that.recommendList = that.recommendList.concat(res.data);
          that.ifHasMoreData = false;
          that.noData = true;
          that.firstNoData = false;

 } else if (res.data.length == 10) { // 如果是加载数据还是后台返回的加载数据条数，则我们认为还有数据
          that.recommendList = that.recommendList.concat(res.data);
          that.ifHasMoreData = true;
          that.noData = false;
          that.firstNoData = false;

 }

4、加载更多页面的函数处

loadMore() {
      console.log("执行加载更多");
      let that = this;
      if (that.ifHasMoreData) {   //如果有更多数据
        that.nowloading = true;  //打开加载动画
        that.page = ++that.page; // 页数加1
        that.getRecruitList();  //执行加载数据的函数。
      }
 },