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 ...
随机推荐
- nyoj 457-大小写互换
457-大小写互换 内存限制:64MB 时间限制:1000ms 特判: No 通过数:18 提交数:21 难度:0 题目描述: 现在给出了一个只包含大小写字母的字符串,不含空格和换行,要求 ...
- ssm 不能将查询的结果返回到界面的一个原因
* 在controller类中,应先定义一个ArrayList的集合即就是: List<Product> defaultProductList = new ArrayList(); // ...
- 逆向分析objc,所有类的信息都能在动态调试中获取。
因为objc是动态绑定的,程序运行时必须知道如何绑定,依靠的就是类描述.只要知道类描述是如何组织的就可以获取一切有用的信息.不知道是幸运还是不幸,这些信息全部都在运行的程序中.即使没有IDA这样的工具 ...
- MATLAB相机标定转XMl代码
function writeXML(cameraParams,file) %writeXML(cameraParams,file) %功能:将相机校正的参数保存为xml文件 %输入: %cameraP ...
- 页面加载和图片加载loading
准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 doc ...
- Flex容器拖动(Bordercontainer为例)
Bordercontainer的拖放到任意位置. mxml: 为Bordercontainer添加鼠标按下和弹起事件 <s:BorderContainer id="bdShow&quo ...
- SpringBoot之DispatcherServlet详解及源码解析
在使用SpringBoot之后,我们表面上已经无法直接看到DispatcherServlet的使用了.本篇文章,带大家从最初DispatcherServlet的使用开始到SpringBoot源码中Di ...
- linux工作调度(计划任务)
linux工作调度有两种:at,cron · at:at是一个可以处理仅执行一次就结束调度的命令.说白了就是在某个时间需要干某一件事,例如在2018年10月12日下午一点要执行一个数据库矫正脚本. · ...
- 豆瓣 URLError: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:719)>
import urllib.request as urlrequest #import ssl#ssl._create_default_https_context = ssl._create_unve ...
- PAT(甲级)2019年春季考试
7-1 Sexy Primes 判断素数 一个点没过17/20分 错因:输出i-6写成了输出i,当时写的很乱,可以参考其他人的写法 #include<bits/stdc++.h> usin ...