用el-scrollbar+el-timeline滚动到底部分页刷新

html:

<div class="content_left">
        <el-card shadow="always">
          <div class="radio">
            排序：
            <el-radio-group v-model="reverse">
              <el-radio :label="true">倒序</el-radio>
              <el-radio :label="false">正序</el-radio>
            </el-radio-group>
          </div>
          <el-timeline :reverse="reverse" v-loading="loading">
            <el-scrollbar style="height:100%;" id="scrollbar" ref="scrollbar">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
              >
                <div>
                  {{activity.start_time|formatDate}}
                  <span class="item_xian"></span>
                  {{activity.end_time|formatDate}}
                </div>
                <div>
                  <div class="li_div">
                    <label for>名称:</label>
                    <span>{{activity.title}}</span>
                  </div>
                  <div class="li_div">
                    <label for>内容:</label>
                    <span>{{activity.field_id.field_name}}</span>
                    <el-tag>{{activity.field_id.type_name}}</el-tag>
                  </div>
                </div>
              </el-timeline-item>
              <div
                id="load"
                style="height:1px;width: 80%;margin: 0 auto;"
              ></div>
              <div v-if="state" style="text-align:center;height: 28px;">没有更多了</div>
            </el-scrollbar>
          </el-timeline>
        </el-card>
      </div>

js：
正序倒序部分

data() {
    return {
      loading: true,
      reverse: true,
      state: false,
      flag: false,
      activities: [],
    };
  },
  watch: {//监听reverse变量
    reverse: function(val) {
      // console.log(val);
      if (val) {
        this.activities = this.activities.sort(function(a, b) {
          return b.start_time < a.start_time ? 1 : -1;
        });
      } else {
        this.activities = this.activities.sort(function(a, b) {
          // return b.start_time - a.start_time;
          return b.start_time > a.start_time ? 1 : -1;
        });
      }
      // console.log(list);
    }
  },

滚动部分

mounted() {
  //监听事件
  this.flag = true;
  document
    .getElementById("scrollbar")
    .addEventListener("scroll", this.listenScrollbar, true);
},

methods: {
  listenScrollbar() {
    if (this.flag) {
      //scrollbar  在App.vue页面  滚动条    这个一定要找到
      // console.log(document.getElementById("scrollbar").firstChild.scrollTop);
      let let1 = document.getElementById("scrollbar").firstChild.scrollTop; //滚动条滚动距离
      let let2 = document.getElementById("scrollbar").firstChild.scrollHeight; //浏览器总高度
      let let3 = document.getElementById("scrollbar").scrollHeight; //浏览器可见高度
      if (let2 - let3 - let1 <= 0.05) {
        this.flag = false;
        // console.log("底部");
        let loadingInstance = this.$loading({
          target: "#load",
          text: "加载中"
        });
        ++this.metaparams.page;
        // console.log(this.metaparams.page);
        setTimeout(() => {
          this.getAgenda();
          loadingInstance.close();
        }, 2000);
      }
    }
  },
  getAgenda() {
    let _this = this;
    //调用后端接口
    _List(this.metaparams).then(response => {
      if (response.data.length !== 0) {
        // _this.activities = response.data;
        let list = response.data.sort(function(a, b) {
          return b.start_time < a.start_time ? 1 : -1;
        });
        for (let i in list) {
          _this.activities.push(list[i]);
        }
        //*判断在这
        _this.reverse = true;
        _this.state = false;
        _this.loading = false;
        _this.flag = true;
        // console.log(_this.activities);
      } else {
        //*判断在这
        _this.state = true;
        _this.flag = false;
      }
    });
  }

本文下拉逻辑参考下面这篇博客
!https://blog.csdn.net/clumsyCoding/article/details/89383976
欢迎大家留言交流
大家2020新年快乐!