滚动加载数据

效果图:

  综合使用后,觉得还是以下绑定 div监听滚动条的方式好用,有的可以监听滚轮滚动,但是监听不到鼠标拖动滚动条,下面这种方式两者都可以监测到↓

<template>
  <div class="scrollTest-container" id="scrollTestContainer">
    <div class="item" v-for="(item) in commentsList" :key="item.IDcard">{
   
   {item.name}}</div>
  </div>
</template>

<script>
import { getUserList } from "../api/index";
import "../mock/index";
export default {
  name: "ScrollTest",
  data() {
    return {
      pageSize: 12,
      pageNum: 0,
      commentsList: []
    };
  },
  mounted() {
    const that = this;
    let dom = document.getElementById("scrollTestContainer");
    dom.addEventListener("scroll", function() {
      const clientHeight = dom.clientHeight;
      const scrollTop = dom.scrollTop;
      const scrollHeight = dom.scrollHeight;
      //条件成立
      if (clientHeight + scrollTop == scrollHeight) {
        that.pageNum++;
        //获取数据
        that.getList();
      }
    });
    this.getList();
  },
  methods: {
    getList() {
      getUserList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(data => {
        if (data.code == 200 && data.data) {
          if (Array.isArray(data.data)) {
            let result = data.data;
            result.forEach(item => {
              this.commentsList.push(item);
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.scrollTest-container {
  width: 1000px;
  height: 400px;
  background-color: aquamarine;
  overflow-y: auto;
}
.item {
  width: 100%;
  height: 10%;
  border-bottom: 2px solid skyblue;
  box-sizing: border-box;
}
</style>