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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
详解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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
js中跨域方法原理详解
2015/07/19 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
12步教你理解Python装饰器
2016/02/25 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python字符串格式化方式解析
2019/10/19 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
理财投资建议书
2014/03/12 职场文书
感恩节活动策划方案
2014/05/16 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
python 逐步回归算法
2021/04/06 Python
MongoDB balancer的使用详解
2021/04/30 MongoDB
python获取对象信息的实例详解
2021/07/07 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android