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 ...
随机推荐
- hdu 1083 Courses (最大匹配)
CoursesTime Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- IBM-X3850-4U诊断面板信息
IBM X3850 4U 指示灯 描述 OVERSPEC 没有足够的电量为系统供电.NONRED和LOG指示灯可能也点亮 PS 一个电源故障或者被电源未插 LINK 保留 CPU CPU出现故障.丢失 ...
- 前端页面传来数组,后台用对象集合list接收数据的写法
//保存页面显示应用$("#save").click(function(){ var data = [{"applicationtypeid":"65 ...
- PL真有意思(四):控制流
前言 对大多数计算模型而言,顺序都是基本的东西,它确定了为完成所期望的某种工作,什么事情应该最先做,什么事应该随后做,我们可以将语言规定顺序的机制分为几个类别: 顺序执行 选择 迭代 过程抽象 递归 ...
- [UWP]UIElement.Clip虽然残废,但它还可以这样玩
1. 复习一下WPF的UIElement.Clip 用了很久很久的WPF,但几乎没有主动用过它的Clip属性,我只记得它很灵活,可以裁剪出多种形状.在官方文档复习了一下,大致用法和效果如下: < ...
- .NET Core 3.0之深入源码理解HealthCheck(一)
写在前面 我们的系统可能因为正在部署.服务异常终止或者其他问题导致系统处于非健康状态,这个时候我们需要知道系统的健康状况,而健康检查可以帮助我们快速确定系统是否处于正常状态.一般情况下,我们会提供公开 ...
- createTextNode
createTextNode()方法将创建一个包含给定文本的新文本文档节点.这个方法的返回值是一个指向新建文本节点的引用指针: reference = document.createTextNode( ...
- 使用python删除指定文件夹及子文件,保留多少
python版本为:2.7 import os,time,shutil,datetime def rmdir(deldir,N): dellist=os.listdir(deldir) deldate ...
- Integer的比较==和String的比较==总结
一.序言 今天发现了一个很有趣的问题,在群里和朋友们讨论的也比较激烈,我现在给大家阐述一下问题. 二.发现问题 上代码... package com.hzwealth.test.question; p ...
- “狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一.垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高. 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介 ...