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实现带省略号的分页
Apr 27 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
Node.js API详解之 os模块用法实例分析
May 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
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php使用codebase生成随机数
2014/03/25 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JS 建立对象的方法
2007/04/21 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
python单例模式实例解析
2018/08/28 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python单元和文档测试实例详解
2019/04/11 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
大学生两会学习心得体会
2014/03/10 职场文书
小学二年级评语
2014/04/21 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
教师见习总结范文
2015/06/23 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS