监听页面滚动

<template>
  <div>
    <div class="divc"></div>
    <div class="divc"></div>
    <div class="divc"></div>
    <div class="divc"></div>
    <div class="loading">
      <span>{{loading ? '正在加载中...' : '已经到底了'}}</span>
    </div>
  </div>
</template>
<script>
const echarts = require("echarts");
export default {
  name: "",
  data() {
    return {
      loading: true
    };
  },
  methods: {
    //监听滚动
    scrollFn() {
      // 获取窗口高度wh，滚动出去的长度st，文档的长度doch
      let wh =
        window.innerHeight ||
        document.documentElement.height ||
        document.body.height;
      let st = document.documentElement.scrollTop || document.body.scrollTop;
      let doch =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (wh + st >= doch) {
        console.log("触底了");
      }
    }
  },
  mounted() {
    //监听滚动
    window.addEventListener("scroll", this.scrollFn);
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener("scroll", this.scrollFn);
  }
};
</script>
<style scoped>
.divc {
  height: 314px;
  border: 1px solid;
  margin-bottom: 20px;
}

.loading {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  justify-content: center;
}
</style>