一、问题描述

首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部。

二、解决方案

如果数据在刚好加载完的时候滚动条就定位到了最底部就好了,就不会在进入聊天窗口之后还看到滚动条在往下滚动,出现的问题就是因为获取数据和设置滚动条位置的代码不是同步的不是按顺序执行的,后者加了定时器。

像微信聊天窗口一样,一进入到聊天窗口就看到滚动条是在聊天窗口的最底部。

聊天窗口是一个组件,调起的不同的用户的聊天窗口都是这一个聊天窗口组件。

聊天窗关键代码:

created() {
bus.$on('getMessageData', (user)=> {
this.userObj = JSON.parse(JSON.stringify(user))
if(user && !user.id) {
console.error("有问题userObj.id为:", user.id)
}
this.messageList = []
this.$nextTick(()=> {
setTimeout(() => {
this.scrollContainer = document.querySelector('.chat-window-content')
this.getUserToAssistantInfo()
.then(() => {
return this.getUserInfoList(user)
})
this.refresh(user)
}, 100);
})
})
}
async getUserInfoList(user) {
return apis.getWxMessageData({user_id: user.id}).then(({data:{index, messages}}) => {
this.index = index || ''
this.messageList = messages || []
this.$nextTick(() => {
let el = this.scrollContainer
el.scrollTop = el.scrollHeight-el.clientHeight
// console.log(el, el.scrollTop, el.scrollHeight, el.clientHeight)
})
})
}

注意3个关键点:

1、确保总是能拿到滚动区域的外层元素,用来定位滚动条的位置,也就是一定要在dom渲染能拿到dom元素再读取元素。

2、在能拿到这个元素的情况下,去获取聊天内容。

3、确保在获取到数据并渲染之后立即设置滚动条到最底部。

因为vue中dom数据的更新是异步的,vue中当观察到数据变化时,会开启一个队列,也就是最终数据的刷新会在下一个事件循环Tick中去执行。所以在获取到聊天内容之后,要立即更新滚动条的位置,必须放在nextTick中去执行设置滚动条位置的代码。

类似问题参考:

vue踩坑日记之$nextTick:

https://www.jianshu.com/p/d6cbcb0904c8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

简单理解vue中的nextTick:

https://juejin.im/post/5a6fdb846fb9a01cc0268618

vue聊天功能之滚动条自动定位到底部的更多相关文章

  1. vue 内容增加滚动条自动定位至底部

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

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

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

  3. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  4. MVC实现类似QQ的网页聊天功能-ajax(下)

    此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一 ...

  5. WebSocket(3)---实现一对一聊天功能

    实现一对一聊天功能 功能介绍:实现A和B单独聊天功能,即A发消息给B只能B接收,同样B向A发消息只能A接收. 本篇博客是在上一遍基础上搭建,上一篇博客地址:[WebSocket]---实现游戏公告功能 ...

  6. socket实现聊天功能(二)

    socket实现聊天功能(二) WebSocket协议是建立在HTTP协议之上,因此创建websocket服务时需要调用http模块的createServer方法.将生成的server作为参数传入so ...

  7. 基于PHP实现一个简单的在线聊天功能(轮询ajax )

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  8. 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能

    一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...

  9. 企业微信JS-SDK实现会话聊天功能

    vue引入企业微信JS-SDK实现会话聊天功能 这两天在做一个对接企业微信实现会话聊天的功能, 发现企业微信文档这块儿做的不是特别详细,网上搜索也没找到特别完整的流程. 期间也踩了不少的坑, 在此进行 ...

随机推荐

  1. this和super用法详解

    这几天看到类在继承时会用到this和super,这里就做了一点总结,与各位共同交流,有错误请各位指正~ this this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this ...

  2. HDU 2048:神、上帝以及老天爷(错排公式,递推)

    神.上帝以及老天爷 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  3. ZOJ 1005:Jugs(思维)

    Jugs Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge In the movie "Die Har ...

  4. C语言--第八周作业评分(5班)

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1400 一.评分要求 要求1 完成14.15周的所有PTA中题目集,总共4次题 ...

  5. 实验吧—Web——WP之 what a fuck!这是什么鬼东西?

    打开链接——> 发现是一大堆符号,可能有些人见过这些样子的,这是一种编码方式,叫:jother编码 jother编码是一种运用于javasscript语言中利用少量字符构造精简的匿名函数方法,对 ...

  6. 通信协议演进与JCE协议详解

    一.通信协议概述通信协议是两个节点之间为了协同工作.实现信息交换,而协商的规则和约定,例如规定字节序,各个字段类型,使用什么压缩算法或加密算法等. 1.原始数据假设A和B通信,获取或设置用户基本资料, ...

  7. Tomcat环境变量配置命令行报错:The JRE_HOME environment variable is not defined correctl This environment variable is needed to run this program

    1. tomcat——>bin——>setclasspath.bat,使用记事本打开. 2. 添加如下代码即可: 为自己实际的环境变量配置为准!!! set JAVA_HOME=D:\ID ...

  8. NALU数据打RTP包流程详解

    最近在看RTP发送H264数据的文章,感觉很乱,没有比较清晰易懂的教程,自己整理了一下各种资料,备忘! --------Part A  ---- 先说说H264数据,H264在网络传输的是NALU(N ...

  9. 枚举 Java Enumeration接口

    Enumation 定义了一些方法,通过这些方法可以枚举对象集合中的元素 如: boolean hasMoreElements() 测试此枚举是否包含更多的元素 object nextElement( ...

  10. 论 大并发 下的 乐观锁定 Redis锁定 和 新时代事务

    在 <企业应用架构模式> 中 提到了 乐观锁定, 用 时间戳 来 判定 交易 是否有效, 避免 传统事务 的 表锁定 造成 的 瓶颈 . 在 现在的 大并发 的 大环境下, 传统事务 及其 ...