Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息
在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto
注意:vue项目需要注意在dom结构渲染完再进行操作
<div class="mains" ref="chatContent">
<Dialog :text="text"/>
</div>
mounted() {
this.scrollToBottom()
},
updated(){
this.scrollToBottom()
},
methods: {
scrollToBottom() {
this.$nextTick(() =>{
this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
})
}
}
参考博客:https://blog.csdn.net/qq_14993375/article/details/79336232?utm_source=blogxgwz1
参考博客:https://blog.csdn.net/qq_40557812/article/details/85051011
Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息的更多相关文章
- 数据更新后让ListView自动滚动到底部
在做聊天界面的时候想要发送新的数据后,listview自动滚动到底部,显示出最新的数据.网上找了两个方法,觉得不错,记录一下. 方法一: 给listview添加下面两个属性 android:stack ...
- C# ListBox 自动滚动到底部 方法:
在ListBox中添加一条记录(ListBox.Items.Add方法)后,滚动条会自动回到顶部.我们可能更希望它自动滚动到底部,简要介绍几种方法. 方法一: this.listBox1.Items. ...
- JS + jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome
HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...
- 界面为ScrollView时打开界面会自动滚动到底部之解决方法
开发中遇到了这样的一个问题,界面最外层是ScrollView,然后里面有嵌套了一个ListView还有其他可以获取焦点的View,然后每次打开界面都会自动滚动到最底部,经过一番折腾,发现了一个简单的方 ...
- IOS 浏览器上设置overflow: auto 不可滚动
项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div .main { position: fixe ...
- Android中Gallery和ImageSwitcher同步自动(滚动)播放图片库
本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...
- vue中npm run dev 不能自动打开浏览器运行项目
最近用vue2.0 + webpack搭建了环境创建新的项目.出现一个很蹩脚的问题: 在终端输入 npm run dev 的时候,不能自动打开浏览器运行项目. 这段话的意思是:你的应用程序运行地址是: ...
- vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...
- vue中使用axios post上传头像/图片并实时显示到页面
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto ...
随机推荐
- Fedora27(CentOS7)快捷键
设置快捷键参考文档https://jingyan.baidu.com/article/f7ff0bfc1e2a322e26bb13d5.html Termial: 启动新的Terminal 需要自己 ...
- 树的点分治 (poj 1741, 1655(树形dp))
poj 1655:http://poj.org/problem?id=1655 题意: 给无根树, 找出以一节点为根, 使节点最多的树,节点最少. 题解:一道树形dp,先dfs 标记 所有节点的子 ...
- JMeter从0开始-笔记
1.安装Jmeter之前 安装Jmeter之前需要先配置Java环境,我们下载的是jmeter4.0,所以java版本最好是选用java8以上的版本. 安装JDk1.6的步骤如下: 点击下载的JDK文 ...
- opencv 6 图像轮廓与图像分割修复 2 使用多边形将轮廓包围
使用多边形将轮廓包围 返回外部矩阵边界(boundingRect()函数) 寻找最小包围矩形(minAreaRect()函数) 寻找最小包围圆形(minEnclosingCircle函数) 用椭圆拟合 ...
- .NET进阶篇06-async异步、thread多线程3
知识需要不断积累.总结和沉淀,思考和写作是成长的催化剂 梯子 一.任务Task1.启动任务2.阻塞延续3.任务层次结构4.枚举参数5.任务取消6.任务结果7.异常二.并行Parallel1.Paral ...
- Spring基于构造函数和设值函数的依赖注入
基于构造函数的依赖注入 我们知道,bean标签中指定的类会进行初始化,这个初始化过程中自然会调用构造函数,那我们也可以利用这个构造函数完成依赖注入. 先创建一个类: public class Text ...
- word使用指南(经常更新)
一.快捷键 Ctrl+C 复制 Ctrl+X 剪切 Ctrl+V 粘贴 Ctrl+F 查找 Ctrl+A 全选 Ctrl+Z/Y 撤销/还原撤销 Ctrl+D 打开字体对话框 Ctrl+S 另存为 C ...
- [ch02-03] 梯度下降
系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 2.3 梯度下降 2.3.1 从自然现象中理解梯度下降 ...
- day 13 生成器函数 表达式 推导式
今日主要内容 1. 生成器和生成器函数 生成器的本质就是迭代器 生成器的三种创建办法: 1.通过生成器函数 2.通过生成器表达式创建生成器 3.通过数据转换 2. 生成器函数: 函数中包含了yield ...
- 解决WebUploader 上传按钮按F12 才行的问题
遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了 ...