VUE实时监听元素距离顶部高度的操作


Posted in Javascript onJuly 29, 2020

效果图如下所示

VUE实时监听元素距离顶部高度的操作

.html

<!-- 监听ref距离顶部高度 -->
<div ref="pronbit">
 <div>今日热门</div>
 <div>今日热销</div>
</div>

.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才会被创建,此时再去获取,示例代码如下:

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
  </div>
  <script>
  var app = new Vue({
    el : "#app",
    data:{
      showDiv : false
    },
    methods:{
      getText:function(){
        this.showDiv = true;
        var text = document.getElementById('div').innnerHTML;
         console.log(text);
      }
    }
  })
  </script>

这段代码并不难理解,但是运行后在控制台会抛出一个错误:Cannot read property 'innnerHTML of null,意思就是获取不到div元素。这里就涉及Vue一个重要的概念:异步更新队列。

异步更新队列

Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所有数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver,如果都不支持,就会采用setTimeout代替。

知道了Vue异步更新DOM的原理,上面示例的报错也就不难理解了。事实上,在执行this.showDiv = true时,div仍然还是没有被创建出来,直到下一个vue事件循环时,才开始创建。$nextTick就是用来知道什么时候DOM更新完成的,所以上面的示例代码需要修改为:

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
  </div>
  <script>
  var app = new Vue({
    el : "#app",
    data:{
      showDiv : false
    },
    methods:{
      getText:function(){
        this.showDiv = true;
        this.$nextTick(function(){
           var text = document.getElementById('div').innnerHTML;
           console.log(text); 
        });
      }
    }
  })
  </script>

这时再点击事件,控制台就打印出div的内容“这是一段文本“了。

理论上,我们应该不用去主动操作DOM,因为Vue的核心思想就是数据驱动DOM,但在很多业务里,我们避免不了会使用一些第三方库,比如 popper.js、swiper等,这些基于原生javascript的库都有创建和更新及销毁的完整生命周期,与Vue配合使用时,就要利用好$nextTick。

以上这篇VUE实时监听元素距离顶部高度的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
详解JavaScript作用域 闭包
Jul 29 #Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
Vue 监听元素前后变化值实例
Jul 29 #Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
You might like
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python读取中文txt文本的方法
2018/04/12 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
centos7之Python3.74安装教程
2019/08/15 Python
python conda操作方法
2019/09/11 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
Android笔试题总结
2014/11/29 面试题
大学生写自荐信的技巧
2014/01/08 职场文书
教师简历自我评价
2014/02/03 职场文书
入学生会自荐书范文
2014/02/05 职场文书
golang中的空slice案例
2021/04/27 Golang
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript