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

数据改变之后,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. 使用Python比较MySQL数据库中两个数据库的表结构--转载

    https://blog.csdn.net/tenaguan4461/article/details/82286781 https://www.jianshu.com/p/b3dac5a3479a

  2. SAS学习笔记21 散点图、条形图

  3. 原来你是这样的PaaS!

    啥叫PaaS? 许多人身处互联网领域,对PaaS仍然是雾里看花.它看似复杂,其实只要用对看法,人人都可以轻松的认识它. 网络上盛传着用pizza为例子帮助人们了解什么是PaaS,那么编者今天也不举栗子 ...

  4. centos7搭建EFK日志分析系统

    前言 EFK可能都不熟悉,实际上EFK是大名鼎鼎的日志系统ELK的一个变种 在没有分布式日志的时候,每次出问题了需要查询日志的时候,需要登录到Linux服务器,使用命令cat -n xxxx|grep ...

  5. SpringBoot 第一篇:HelloWorld 跑起来

    背景 金融行业从业快十年,作为银行系开发人员来说开源框架了解不多非常正常,因为银行系的运行平台,基本上不会采购小厂商集合开源框架自建的产品,竞标的产品没有几十个成功案例,你也进不了这个门槛(有关系的除 ...

  6. 浅谈C++继承

    C++中的继承 1.继承概念及定义:     概念:是面向对象程序设计使代码可以复用的最重要的手段-----继承是类设计层次的复用     定义:            父类->基类:子类-&g ...

  7. hdu 4324

    思路待整理 #include<cstdio> #include<iostream> #include<vector> #include<queue> # ...

  8. JS使用MD5加密

    MD5加密JS代码 /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algor ...

  9. 50道高级sql练习题;大大提高自己的sql能力(附具体的sql)

    问题及描述:--1.学生表Student(SID,Sname,Sage,Ssex) --SID 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别--2.课程表Course(CID ...

  10. Senparc.Weixin+nginx配置之坑 ‘10003 redirect_uri域名与后台不一致’

    微信公众号扫一扫功能提示:10003 redirect_uri域名与后台不一致 Senparc.Weixin组件很好用,但一个坑,不知道这和个是否有关.. 先说明下环境,centos+.net cor ...