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 相关文章推荐
Javascript 垃圾收集机制介绍理解
May 14 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
微信小程序之购物车功能
Sep 23 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
Python ZipFile模块详解
2013/11/01 Python
python中的sort方法使用详解
2014/07/25 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
解决Django中多条件查询的问题
2019/07/18 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
敬老模范事迹
2014/05/21 职场文书
2014离婚协议书范文
2014/09/10 职场文书
股东授权委托书范文
2014/09/13 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
会计专业求职信范文
2015/03/19 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
导游词之昭君岛
2020/01/17 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript