在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的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. 网络权重初始化方法总结(下):Lecun、Xavier与He Kaiming

    目录 权重初始化最佳实践 期望与方差的相关性质 全连接层方差分析 tanh下的初始化方法 Lecun 1998 Xavier 2010 ReLU/PReLU下的初始化方法 He 2015 for Re ...

  2. 【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

    CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 有趣的css3实战案例剖析——(水纹波动)

    对于css3的学习,更多的是在于对新特性和基础理论的熟悉, 这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(水纹波动),不用js写动 ...

  4. MemoryStream相关知识分享

    一.简单介绍一下MemoryStream MemoryStream是内存流,为系统内存提供读写操作,由于MemoryStream是通过无符号字节数组组成的,可以说MemoryStream的性能可以算比 ...

  5. 领扣(LeetCode)两个列表的最小索引总和 个人题解

    假设Andy和Doris想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答案不止一个,则输出所有答 ...

  6. expect 自动填充密码

    它的脚本以#!/usr/bin/expect开头,执行时用expoct,而不是bash.我的一个给samba自动创建用户并且自动填写默认密码的脚本如下: vim smb_passwd.exp #!/u ...

  7. Pytorch文本分类(imdb数据集),含DataLoader数据加载,最优模型保存

    用pytorch进行文本分类,数据集为keras内置的imdb影评数据(二分类),代码包含六个部分(详见代码) 使用环境: pytorch:1.1.0 cuda:10.0 gpu:RTX2070 (1 ...

  8. JS的原型和继承

    __proto__除null和undefined,JS中的所有数据类型都有这个属性: 它表示当我们访问一个对象的某个属性时,如果该对象自身不存在该属性, 就从它的__proto__属性上继续查找,以此 ...

  9. 解决无法定位软件包 或 install net-tools

    解决无法定位软件包  或  install net-tools  当我们安装好Linux后,因为里面有很多功能服务没有安装(如ifconfig.vsftpd) 所以出现一些command  '**** ...

  10. gulp 自动化构建html项目--自动刷新

    使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...