在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的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. nyoj 457-大小写互换

    457-大小写互换 内存限制:64MB 时间限制:1000ms 特判: No 通过数:18 提交数:21 难度:0 题目描述:       现在给出了一个只包含大小写字母的字符串,不含空格和换行,要求 ...

  2. ssm 不能将查询的结果返回到界面的一个原因

    * 在controller类中,应先定义一个ArrayList的集合即就是: List<Product> defaultProductList = new ArrayList(); // ...

  3. 逆向分析objc,所有类的信息都能在动态调试中获取。

    因为objc是动态绑定的,程序运行时必须知道如何绑定,依靠的就是类描述.只要知道类描述是如何组织的就可以获取一切有用的信息.不知道是幸运还是不幸,这些信息全部都在运行的程序中.即使没有IDA这样的工具 ...

  4. MATLAB相机标定转XMl代码

    function writeXML(cameraParams,file) %writeXML(cameraParams,file) %功能:将相机校正的参数保存为xml文件 %输入: %cameraP ...

  5. 页面加载和图片加载loading

    准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 doc ...

  6. Flex容器拖动(Bordercontainer为例)

    Bordercontainer的拖放到任意位置. mxml: 为Bordercontainer添加鼠标按下和弹起事件 <s:BorderContainer id="bdShow&quo ...

  7. SpringBoot之DispatcherServlet详解及源码解析

    在使用SpringBoot之后,我们表面上已经无法直接看到DispatcherServlet的使用了.本篇文章,带大家从最初DispatcherServlet的使用开始到SpringBoot源码中Di ...

  8. linux工作调度(计划任务)

    linux工作调度有两种:at,cron · at:at是一个可以处理仅执行一次就结束调度的命令.说白了就是在某个时间需要干某一件事,例如在2018年10月12日下午一点要执行一个数据库矫正脚本. · ...

  9. 豆瓣 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 ...

  10. PAT(甲级)2019年春季考试

    7-1 Sexy Primes 判断素数 一个点没过17/20分 错因:输出i-6写成了输出i,当时写的很乱,可以参考其他人的写法 #include<bits/stdc++.h> usin ...