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 相关文章推荐
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
jQuery设计思想
Mar 07 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
Vue数据绑定实例写法
2019/08/06 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Ajax的优点和缺点
2014/11/21 面试题
幼儿园消防安全制度
2014/01/26 职场文书
协议书怎么写
2014/04/21 职场文书
教师评语大全
2014/04/28 职场文书
青春励志演讲稿
2014/04/29 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
内科护士节演讲稿
2014/09/11 职场文书
消防隐患整改通知书
2015/04/22 职场文书
李强为自己工作观后感
2015/06/11 职场文书