addEventListenter 监听页面滚动事件 鼠标左键拖拉滚轮

问题：在同一个界面需要调的接口太多，需要做懒加载
想法：监听滚动位置，到一个范围内调用对应的接口
做法1：
1、首先在整个vue文件的最外层加上 ref="scrollview"和 @mousewheel=“scrollChange”

<template>
<div
ref="scrollview"
@mousewheel="scrollChange"
>
<!--主要内容
work-list：这是我写的组件，在组件中加入ref="workChild"-->
<work-list
ref="workChild"
/>
</div>
</template>

2、在methods中写下一个滚轮方法，里面具体需要做什么处理（比如到哪个位置调用哪个接口或者做其他处理），在html中的组件中加入ref=“workChild”，

 methods: {
scrollChange(e) {
const srollTop = document.documentElement.scrollTop;
console.log(srollTop);
if (srollTop > 900 && srollTop < 1500) {
if (this.workFlag) {
this.workFlag = false; //在data中定义的，防止重复调用，你也可以用防抖来做
this.$refs.workChild.getWorkList(); //调用子组件work-list的getWorkList方法
}
}
}
}

3、然后在mounted中调用

mounted() {
this.$nextTick(()=>{
const scrollview = this.$refs['scrollview'];
scrollview.addEventListener('scroll', this.scrollChange, true);
})
},

但是方法1存在一个问题，只能用鼠标滚轮，直接用鼠标左键上下拉滚轮就不会调用这个方法this.scrollChange(),因为@mousewheel只支持鼠标滚动

但是不行啊，有时候鼠标滚轮很烦，我想要直接左键拉动滚动条啊，所以方法2来了

方法2：
1、这时候不需要绑定mousewheel

<template>
<div
ref="scrollview"
>
<!--主要内容
work-list：这是我写的组件，在组件中加入ref="workChild"-->
<work-list
ref="workChild"
/>
</div>
</template>

方法内容一样

 methods: {
scrollChange(e) {
const srollTop = document.documentElement.scrollTop;
console.log(srollTop);
if (srollTop > 900 && srollTop < 1500) {
if (this.workFlag) {
this.workFlag = false; //在data中定义的，防止重复调用，你也可以用防抖来做
this.$refs.workChild.getWorkList(); //调用子组件work-list的getWorkList方法
}
}
}
}

3、这个直接使用window.addEventListener监听整个window就行

mounted() {
this.$nextTick(()=>{
window.addEventListener('scroll', this.scrollChange, true);
})
},

4、监听完最好记得去除一下，不然到时候有bug我就不清楚了

beforeDestroy() {
window.removeEventListener('scroll', this.scrollChange, true);
},

感觉应该还有更好的方法，但是我想不到了，欢迎各位指导！

最后

以上就是刻苦烤鸡为你收集整理的addEventListenter 监听页面滚动事件 鼠标左键拖拉滚轮的全部内容，希望文章能够帮你解决addEventListenter 监听页面滚动事件 鼠标左键拖拉滚轮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。