【vue】页面触底加载（下拉加载loading）

列表页面经常需要下拉加载这样一个需求。
前端常用的东西，我这种菜鸡前端当然是要记录下来的~~

原理

监听页面滚动事件，判断页面是否将近浏览器底部，是则加载更多数据。
（判断语句：scrollTop + clientHeight >= scrollHeight）

小编多嘴提一句，前端有几个宽高我们得搞清楚：
【本图出自】【分辨这些宽高可参考文章】

动手实现

mounted() {
    // 事件监听
    window.addEventListener("scroll", this.listenBottomOut);
  },
destroyed() {
    // 离开页面取消监听
    window.removeEventListener("scroll", this.listenBottomOut, false);
  },
methods: {
	// 触底触发函数
    listenBottomOut() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight;
      const scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
			console.log("触底了~");
			// 此处可以调用获取数据的方法
      }
    },
}