在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的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自动滚动到底部,实现显示当前最新聊天消息的更多相关文章

  1. 数据更新后让ListView自动滚动到底部

    在做聊天界面的时候想要发送新的数据后,listview自动滚动到底部,显示出最新的数据.网上找了两个方法,觉得不错,记录一下. 方法一: 给listview添加下面两个属性 android:stack ...

  2. C# ListBox 自动滚动到底部 方法:

    在ListBox中添加一条记录(ListBox.Items.Add方法)后,滚动条会自动回到顶部.我们可能更希望它自动滚动到底部,简要介绍几种方法. 方法一: this.listBox1.Items. ...

  3. JS + jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome

    HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...

  4. 界面为ScrollView时打开界面会自动滚动到底部之解决方法

    开发中遇到了这样的一个问题,界面最外层是ScrollView,然后里面有嵌套了一个ListView还有其他可以获取焦点的View,然后每次打开界面都会自动滚动到最底部,经过一番折腾,发现了一个简单的方 ...

  5. IOS 浏览器上设置overflow: auto 不可滚动

    项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div .main { position: fixe ...

  6. Android中Gallery和ImageSwitcher同步自动(滚动)播放图片库

    本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...

  7. vue中npm run dev 不能自动打开浏览器运行项目

    最近用vue2.0 + webpack搭建了环境创建新的项目.出现一个很蹩脚的问题: 在终端输入 npm run dev 的时候,不能自动打开浏览器运行项目. 这段话的意思是:你的应用程序运行地址是: ...

  8. vue中v-cloak解决刷新或者加载出现闪烁(显示变量)

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  9. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

随机推荐

  1. hdu 1817 Necklace of Beads (polya)

    Necklace of Beads Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. 【Java】抽象类和接口详解

    抽象类 一.抽象类的概述 现在请思考一个问题:假如我现在又Dog.Cat.Pig等实例对象,现在我们把它们都抽象成一个Animal类,这个类应该包含了这些Dog.Cat.Pig等实例对象eat的功能, ...

  3. 【Oracle】Oracle ASM管理监控命令

    目录 Oracle ASM管理监控命令 目的: 1.查看磁盘组 2.查看目前归档 3.查看ASM的磁盘路径 4. asmcmd Oracle ASM管理监控命令 目的: 查看目前Oracle ASM相 ...

  4. 2019-9-10:渗透测试,基础学习,nmap扫描命令,php基本语法学习,笔记

    nmap参数-sT,使用tcp全连接的方式 ,扫描过程需要三次握手,建立链接,则说明端口开放,扫描速度慢-sS,使用syn的数据包去检测,接收到ACK说明端口开放-sN,null扫描,发出去的数据包不 ...

  5. Nginx-(四)基本模块2

    nginx常用模块介绍(二) ngx_http_rewrite_module模块配置 (1)       rewrite  regex  replacement [flag]; 将请求的url基于正则 ...

  6. linuxLVM

    一.概念性的东西 LVM2:Logical Volume Manager ,Cersion 2 LVM,依赖于内核的dm模块(将一个或多个底层的设备组织成一个逻辑设备的模块).可以将多个物理分区通过软 ...

  7. pyenv virtualenv和virtualwrapper

    pyenv pyenv最大的优势是:可以在”全局”管理不同版本的Python, 可以随时配置当前的使用的Python版本,并对其他使用Python解释器的程序生效.当系统安装多个版本的Python,使 ...

  8. c# 基于DataTable的Compute方法的扩展

    DataTable.Compute(String, String) 方法 定义 命名空间:System.Data 程序集:System.Data.dll, netstandard.dll, Syste ...

  9. Win10 SQLServer 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序

    环境:Win10+SQLServer2014 场景:在SQLServer导入Excel时,选择Excel2007格式,提示:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供 ...

  10. MySQL5.7.18自动化安装脚本

    背景 很好的朋友邱启明同学,擅长MySQL,目前任职某大型互联网业MySQL DBA,要来一套MySQL自动安装的Shell脚本,贴出来保存一些. 此版本为 MySQL 5.7.18 ###### 自 ...