js在vue中封装监听滚动条触底加载事件

此方法在原生JS以及React中同理使用，如果不用ref也可修改方法中的获取事件对象的方式即可

在监听滚动条触底事件时会有一个问题 ： 滚动条一触底 ，事件不只触发一次，而是多次，这样会一下发多次请求，导致达不到预期效果还影响性能，所以此处我做了一个简易的节流来解决此问题。

最后通过scrollFoot(event)调用，ref的事件对象为实参传入
当已滚动的距离加上dom元素可视区的距离 等于 滚动条总高度时代表触底了

   data(){
		return {
		// 用作节流的延时器初始值
			scrollTime : null
		}
	}
	methods:{
	   // 滚动条触底事件
	    scrollFoot(event) {
	      // 获取需要绑定的dom事件对象
	      const dom = this.$refs[event].bodyWrapper;
	     // 提前声明 防止每次触发滚动事件都生成新的变量
	      let scrollTop, windowHeight, scrollHeight;
	      dom.addEventListener("scroll", () => {
	        // 简易节流
	        if (this.scrollTime) {
	          return;
	        } else {
	          // 已滚动距离
	          scrollTop = dom.scrollTop;
	          // 可视区的高度
	          windowHeight = dom.clientHeight;
	          // 滚动条的总高度
	          scrollHeight = dom.scrollHeight;
	          if (scrollTop + windowHeight === scrollHeight) {
	            // 触底后需要操作的事件
	         
	           // ...... 数据请求 可通过 [...原数据，...新数据]的方式拼接在原数据中
	           
				// 在数据渲染完毕后延迟执行 让滚动条保持在加载的位置
	            this.$nextTick(() => {
	              dom.scrollTop = dom.scrollTop;
	            });
	            this.scrollTime = setTimeout(() => {
	              clearTimeout(this.scrollTime);
	              this.scrollTime = null;
	            }, 200);
	          }
	        }
	      });
    },
   }