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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
jquery cookie的用法总结
Nov 18 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
js简单时间比较的方法
Aug 02 Javascript
详解VUE 数组更新
Dec 16 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
js时间控件只显示年月
2017/01/08 Javascript
nodejs基础应用
2017/02/03 NodeJs
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python中Class类用法实例分析
2015/11/12 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python逆向入门教程
2018/01/15 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
小学教师自我鉴定范文
2014/03/20 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
审美与表现自我评价
2015/03/09 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技