您现在的位置是：网站首页> 编程资料编程资料
vue 实现动态设置元素的高度_vue.js_
2023-05-24
350人已围观
简介 vue 实现动态设置元素的高度_vue.js_
vue动态设置元素的高度
1. 添加样式绑定
2. 添加属性计算
computed: { // 滚动区高度 scrollerHeight: function() { return (window.innerHeight - 50) + 'px'; //自定义高度需求 } }获取元素高度总是不准确的问题
今天老大没安排活干，也不想划水，于是打算用一个websocket写一个简易的聊天系统。
后端代码很容易就写好，但是前端是真的难搞，遇到一个很严重的问题：
当发送一条消息或者是收到一条消息，消息展示界面不能滑到最下面，展示最新消息，于是，经过一段时间的修改，发送新消息时，滚动条虽然能下滑，但是滑不到最底部，于是我添加了一个按钮，使用按钮，将滚动条滑到最底部是可行的。又使用debug调试，发现：vue会先执行你的其它方法，再渲染页面，导致总是只能滑到上一条消息展示的高度。
于是我再百度，发现：重置数据后，获取dom元素高时，dom元素还未渲染完毕，（可能这就是为什么只能滑到上一条消息展示的地方）
解决办法
this.$nextTick()函数 ：在下次DOM更新循环结束之后执行延迟回调
this.$nextTick(()=>{ this.goBottom(); // 滚动条滑到底部的方法 })补充：使用vue获取一个指定的元素的高度，可以使用vue的ref
当ref加在普通的元素上，使用this.ref.name获取到的是dom元素
下面是聊天的html代码
微聊 aaaaaa
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
