在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的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. Live CD

    Live CD,又译为自生系统,是事先存储于某种可移动存储设备上,可不特定于计算机硬件(non-hardware-specific)而启动的操作系统(通常亦包括一些其他软件),不需安装至计算机的本地外 ...

  2. Java——内部类详解

    说起内部类,大家肯定感觉熟悉又陌生,因为一定在很多框架源码中有看到别人使用过,但又感觉自己使用的比较少,今天我就带你具体来看看内部类. 内部类基础 所谓内部类就是在类的内部继续定义其他内部结构类. 在 ...

  3. python selenium框架的Xpath定位元素

    我们工作中经常用到的定位方式有八大种:id name class_name tag_name link_text partial_link_text xpath css_selector 本篇内容主要 ...

  4. php中static关键字的理解

    函数内的static变量 static静态变量的理解 静态变量 类型说明符是static. 静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在 静态存储区内分配存储单元),该区域中的数据在整 ...

  5. [译]Nginx入门引导教程

    本文为[Beginner's Guide]译文,原文地址:http://nginx.org/en/docs/beginners_guide.html Guide 本教程基础的介绍了 nginx,以及能 ...

  6. JavaScript笔记二

    1.表格 - 在网页中可以通过表格来表示一些格式化的数据 - 表格相关的标签 - <table> 用来创建一个表格 - <tr> 表示表格中的一行 - <th> 表 ...

  7. Mysql查询语句之排序查询

    语法: /* select 查询列表 from 表 [where 筛选条件] order by 排序列表 [asc/desc] */ ①asc为升序,desc为降序,且默认为升序 ②order by子 ...

  8. 通俗化讲解JWT鉴权的使用场景及结构安全

    一.基于Session的应用开发的缺陷 在我们传统的B\S应用开发方式中,都是使用session进行状态管理的,比如说:保存登录.用户.权限等状态信息.这种方式的原理大致如下: 用户登陆之后,将状态信 ...

  9. ETL的两种架构——ETL架构和ELT架构优劣势对比

    ​ 导读: 作为现代企业和组织机构的重要资源,信息是进行科学管理与决策分析的基础.ETL 则是把数据转换为信息.知识的关键步骤之一.在 AI 应用场景下,数据集成有哪些特点?随着 AI 应用场景越来越 ...

  10. NTP服务编译安装报错:ntpd.c:124:29: 致命错误:sys/capability.h:没有那个文件或目录

    缺少libcap-devel [root@localhost libcap]# cd /mnt/ [root@localhost mnt]# rpm -Uvh libcap*