1. this.$nextTick(() => {
  2. document.body.scrollTop = document.body.scrollHeight;
  3. console.log(document.body.scrollTop);
  4. });

数据改变之后,DOM 并没有立即发生变化,所以 document.body.scrollTop 还是上一次 DOM更新之后的值。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用。

再次修改之后的代码如下,可以实现自动定位到对话页面的底部,但是还有一个小问题,就是输入新的对话信息之后会出现闪屏的现象,可以通过设置延时来解决。

vue 内容增加滚动条自动定位至底部的更多相关文章

  1. vue聊天功能之滚动条自动定位到底部

    一.问题描述 首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部. 二.解决方案 如果数据在刚好加载完的时候滚动条就定位到了最底 ...

  2. Vue 组件内滚动条 滚到到底部

    因为在vue中,某个组件内 使用scrollTop赋值 滚动条没有变化 使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 所以可以考虑使用投机取巧的办法: ...

  3. 如何用js控件div的滚动条,让它在内容更新时自动滚到底部?

    三种控制DIV内容滚动的方法: 方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2&quo ...

  4. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  5. Vue聊天框默认滚动到底部

    功能场景 在开发中,我们总能遇到某些场景需要运用到聊天框,比如客服对话.如果你不是一名开发人员,可能你在使用QQ或者聊天工具的时候并没有注意到,当你发出一条消息的时候,窗体会默认滚动到最底部,让用户可 ...

  6. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  7. Asp.net多行文本框随内容增加而高度增加

    最近做一个项目,在一个多行文本框(TextBox)里显示新闻内容,由于内容有多有少,并且总是出现垂直滚动条,很不好看,笔者就想用一个法子,去掉垂直滚动条,并且文本框的高度随内容的增加而变大,使高度适应 ...

  8. JS如何判断滚动条是否滚到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight.   scrollTop为滚动条在Y轴上的滚动距离.   clientHeigh ...

  9. python 全栈开发,Day93(vue内容补充,VueX)

    昨日内容回顾 1. 页面的布局 Vue中使用Bootstrap搭页面 1. 安装 1. npm install bootstrap@3.3.7 -S 2. 使用 1. import 'bootstra ...

随机推荐

  1. Linux下如何查看tomcat是否启动、查看tomcat启动日志

    在Linux系统下,重启Tomcat使用命令的操作! 1.首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh ...

  2. MyBatis 源码篇-MyBatis-Spring 剖析

    本章通过分析 mybatis-spring-x.x.x.jar Jar 包中的源码,了解 MyBatis 是如何与 Spring 进行集成的. Spring 配置文件 MyBatis 与 Spring ...

  3. hdu 6205 card card card 尺取法

    card card card Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. (十二)Activitivi5之流程控制网关:排他

    一.概念 所谓排他网关 顾名思义 执行到该网关,根据条件只能走一条执行线 二.案例 当流程走到“学生请假”任务节点的时候, /** * 完成任务 */ @Test public void test_c ...

  5. 体验三大JavaScript文件上传库(Uppy.js/Filepond/Dropzone)

    最近发现了一个高颜值的前端上传组件Uppy.js,立即上手体验了一波,感觉还不错.然后又看到同类型的Filepond以及Dropzone.js,对比体验了一下,感觉都很优秀,但是在体验过程中,都遇到了 ...

  6. 如何判断 Session是否存在

    相信很多人都跟我一样,在写网页中有些位置通过其他网页设置了 Session然后跳转到目标页面就需要要用 Session,但是那个位置如果是直接打开的就用不到 Session,那么问题就来了,例如:系统 ...

  7. python打印表格式数据-星号或注释

    python打印表格式数据,留出正确的空格,格式化打出 代码如下: def printPicnic(itemsDict,leftWidth,rightWidth): print('PICNIC ITE ...

  8. Windows下使用批处理文件.bat删除旧文件

    本文教大家写一个批处理文件.bat删除旧文件,供大家参考,具体内容如下 1. 批处理文件 del_old_file.bat rem 删除D:\temp目录下7天前的文件Forfiles /p E:\b ...

  9. 使用Canvas压缩图片

    讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩. 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法 ...

  10. swiper按钮点击无效及控制器无效问题

    点击箭头图片切换的同时,下面小图标也会随着切换,同理下面小图标切换时,上面也随着滚动. 示例代码如下: <!-- Swiper --> <div class="swiper ...