vue 项目中当页面滚动到一定高度时触发某种事件
1.在data中定义初始化数据
data() {
return {
scrollTopNum: "",//页面滚动的高度
tabshow: false,//是否进行某种操作
};
},
2.在生命周期中添加滚动事件
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
3.获取页面滚动的高度
methods: {
handleScroll() {
let top =
document.documentElement.scrollTop ||
document.body.scrollTop ||
window.pageYOffset;
this.scrollTopNum = top;
}
}
4.监听页面滚动的距离,当达到一定距离时,触发某个操作
watch: {
scrollTopNum: function () {
if (this.scrollTopNum > 45) {
this.tabshow = true;
} else {
this.tabshow = false;
}
},
},