vue 鼠标到达底部后自动分页查询

在需要是的盒子上添加样式

//添加@scroll="handleScroll"
<div class="wonderful" @scroll="handleScroll"></div>

添加数据

data() {
    return {
      isLoading:false,
      tableFrom: {
        page: 1,
        limit: 4,
      },
}

js文档

method:{
 handleScroll() {
      console.log("进入自动执行分页查询")
      //const container = this.$el; // 获取容器元素
      const container = this.$refs.scrollContainer // 获取容器元素
      const scrollHeight = container.scrollHeight; // 容器内容的总高度
      const scrollTop = container.scrollTop; // 容器顶部隐藏的内容高度
      const clientHeight = container.clientHeight; // 容器可视区域的高度

      // 判断是否滚动到底部
     /* if (scrollTop + clientHeight >= scrollHeight && !this.isLoading) {
        // 加载下一页数据
        this.loadNextPage();
      }*/
      if (scrollHeight - scrollTop - clientHeight <= 100 && !this.isLoading) {
        this.loadNextPage();
      }
    },
    loadNextPage() {
      if(this.wonderfulList.length===4) {
        this.isLoading = true; // 开始加载数据
        console.log("加载下一页")
        // 发起请求获取下一页数据，根据分页逻辑更新currentPage和items列表
        this.tableFrom.page = parseInt(this.tableFrom.page) + parseInt(1);//页数+1
        // 模拟异步加载数据的延迟
        console.log(this.tableFrom.page + '自动加载页数变化')
        setTimeout(() => {
          // 将获取到的数据追加到items列表中
          console.log(this.tableFrom.limit + "自动加载的条件")
          getInformationList(this.tableFrom).then((res) => {
            console.log(res.data.list + "自动加载的数据")
            const newData = res.data.list;
            this.wonderfulList = [...this.wonderfulList, ...newData];
          })
          // 更新currentPage的值
          this.isLoading = false; // 加载完成
        }, 1000);
      }
    },
}

后续添加监视器

mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },