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);}}});},}