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 arguments.callee的应用代码
May 07 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
js验证框架实现代码分享
May 18 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
vue实现拖拽交换位置
Apr 07 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中让curl支持sock5的代码实例
2015/01/21 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
Bootstrap实现模态框效果
2019/09/30 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python实现画出e指数函数的图像
2019/11/21 Python
通过实例解析Python调用json模块
2019/12/11 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
晚会开场白和结束语
2015/05/29 职场文书