问题：在同一个界面需要调的接口太多，需要做懒加载
想法：监听滚动位置，到一个范围内调用对应的接口
做法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我就不清楚了文章来源：https://www.toymoban.com/news/detail-492581.html
beforeDestroy() {
window.removeEventListener('scroll', this.scrollChange, true);
},
感觉应该还有更好的方法，但是我想不到了，欢迎各位指导！文章来源地址https://www.toymoban.com/news/detail-492581.html
到了这里，关于addEventListenter 监听页面滚动事件 鼠标左键拖拉滚轮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
