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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
详解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
广播爱好者需要了解的天线知识
2021/03/01 无线电
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python将unicode转为str的方法
2017/06/21 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
Ajax和javascript的区别
2013/07/20 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
招标授权委托书样本
2014/09/23 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书