<!-- 容器 -->
<div ref="cont" @scroll.passive="scrollEvent"></div>
export default {
name: "Demo",
data() {
return {
flag :0, // 定义一个flag变量 充当节流阀
wait:1000, // 定义一个wait变量 延迟多长时间触发
};
},
methods: {
// 滚动事件
scrollEvent() {
// 获取容器盒子的dom
let cont= this.$refs.cont;
// 判断滚动条距离容器底部的位置 当滚动条距离容器底部只有5像素时触发
if (cont.scrollHeight - cont.scrollTop - 5 <= cont.clientHeight) {
if (flag) return;
flag = 1; // 执行完一次后 关闭节流阀
// setTimeout 根据个人需求来定
setTimeout(() => {
// 需要执行的操作 执行完成后开启节流阀flag = 0;
// 如果不需要在进行操作 flag无需改变或者flag = 1;
}, wait);
}
},
},
};
注意:容器必须要有固定的高度