1.首先在mounted生命周期上
mounted() {
// 监听页面滚动事件
window.addEventListener("scroll", this.handleScroll, true);
},
2.也别忘了在离开页面前去掉监听
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll, true);
},
3.方法的使用methods
handleScroll(e) {
let that = this;
const winHeight = e.target.scrollTop || document.documentElement.scrollTop;
// console.log(winHeight);
//在这里就可以写监听逻辑了
下面是获取元素离页面顶部的距离的使用方法
//组件
//this.$refs.$el.tag.xxx.offsetTop(这是网上找到的,但是我实测不行),
得换成this.$refs.xxx.$refs.yyy[0].offsetTop(xxx为子组件得ref,yyy为子组件里面的元素ref)
//普通
//this.$refs.xxx.offsetTop
},