vue滚动到底部会调用多次接口,page会增加多次

这个问题一般是由于滚动事件监听器没有被正确地移除所导致的。可以尝试在滚动到底部时，先判断是否已经加载了所有数据，如果已经加载完毕，则取消滚动事件监听器；如果还有数据未加载，则继续调用接口获取数据。

具体实现可以参考以下代码：

// 在组件的 created 钩子函数中添加滚动事件监听器
created() {
  window.addEventListener("scroll", this.handleScroll);
}

// 在组件销毁时，移除滚动事件监听器
beforeDestroy() {
  window.removeEventListener("scroll", this.handleScroll);
}

// 处理滚动事件
handleScroll() {
  // 获取页面可见区域的高度
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

  // 获取页面滚动的距离
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 获取页面总高度
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  // 判断是否滚动到了底部
  if (clientHeight + scrollTop >= scrollHeight) {
    // 判断是否已经加载了所有数据
    if (this.page === this.totalPage) {
      // 如果已经加载完毕，则取消滚动事件监听器
      window.removeEventListener("scroll", this.handleScroll);
    } else {
      // 如果还有数据未加载，则继续调用接口获取数据
      this.page++;
      this.getData();
    }
  }
}

其中，`this.page` 表示当前页面的页码，`this.totalPage` 表示总页数，`this.getData()` 是调用接口获取数据的方法。需要根据具体的业务逻辑进行相应的调整。