vue 获取元素到页面顶部的距离_VUE实时监听元素距离顶部高度的操作

效果图如下所示

.html

今日热门

今日热销

.js

mounted(){

window.addEventListener('scroll',this.handleScrollx,true)

},

methods: {

handleScrollx() {

console.log('滚动高度',window.pageYOffset)

console.log('距离顶部高度',this.$refs.pronbit.getBoundingClientRect().top)

},

}

补充知识：Vue异步更新队列 及 $nextTick的使用

问题一：什么是$nextTick？

简单回答：

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。

详细解读：

我们先来看这样一个场景：有一个div，默认用 v-if 将它隐藏，点击一个按钮后，改变 v-if 的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取，示例代码如下：