[JavaScript知识库]VUE 列表页中实现分页加载（下拉到底部触发下一页 ）

1、HTML结构

• 注：该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度

  <ul class="my_list" @scroll="scrollEvent">
    <li v-for="(item, index) in myList" :key="item.id"></li>
  </ul>

2.滚动加载分页方法以及所需变量配置

  data() {
    return {
      isUpdate: true, // 是否到底-最后一页
      filter: {
        count: 10, // 页大小
        page: 1, // 当前页
        params: {
          status: "0"， // 额外传参 
        }
      },
      myList: [], // 列表数据集合
      total: 0, // 一共有多少条数据
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 首次加载 
    loadData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
        params: {
          status: this.filter.params.status
        }
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          this.myList= res.data.results;
          this.total = res.data.count;
 		}
      }).catch(() => {
      });
    },
    // 下拉数据更新加载 
    updateData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
        params: {
          status: this.filter.params.status
        }
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          var myList = this.myList;
          res.data.results.forEach(function (item){
            myList.push(item);
          })
          this.myList = myList;
          this.total = res.data.count;
        } else {
          this.filter.page -= 1;
          if(res.data.results.length == 0) {
            this.isUpdate = false;
            this.$message.warning("到底了");
          } else {
          this.$message.error("操作失败");
          }
        }
      }).catch(() => {
        this.filter.page -= 1;
          this.$message.error("操作失败");
      });
    },
   // 列表滚动事件
    scrollEvent (e) {
      if ((e.srcElement.offsetHeight + e.srcElement.scrollTop) - e.srcElement.scrollHeight === 0) {
        if(this.isUpdate) {
          this.filter.page += 1;
          this.updateData();
        } else {
            this.$message.warning("到底了");
        }
      }
    },
  }

3.列表样式

  my_list{
    height: 100vh; // 设置固定高度
    overflow: scroll;
    li {
      background-color: #ffffff;
      margin-bottom: 0.20rem;
	}
  }