（VUE）JS判断滚动条滑动到底部加载更多数据，并防止事件多次触发

• 首先在mounted中添加滚动条scroll监视事件

  mounted() {
    //监视scroll滚动条
    window.addEventListener("scroll", this.isRefresh, true);
  },

• 在isRefresh函数中，当第一次到达底部时我们将isRefreshBool变量变为false（禁止refresh()加载数据函数多次触发），当我们的refresh()函数中请求完成后再将isRefreshBool设为true（允许到达底部执行refresh()加载数据函数）

methods:{
	 //判断滚动条是否到底部，刷新新的数据
    isRefresh() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      // console.log(scrollTop + windowHeight + "--" + scrollHeight);
      if (
        scrollTop + windowHeight >= scrollHeight - 200 &&
        this.isRefreshBool
      ) {
        // false防止refresh()加载数据函数多次触发
        this.isRefreshBool = false;
        this.refresh();
      }
    },
     //刷新推荐文章
    refresh() {
      let that = this;
      Axios.get("/blob/getwebindex", {
        params: {
          p: that.pageNum + 1,
        },
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        },
      })
        .then((Response) => {
          if (Response.data.json.code == 200) {
            that.pageNum = that.pageNum + 1;
            that.list = [...that.list, ...Response.data.json.blobList];
          }
          //refresh()加载数据函数可以触发
          that.isRefreshBool = true;
        })
        .catch((error) => {
          console.log(error);
        });
    },
}