效果图

需求分析

见上图，该功能为常见对话面板。
需求：对话列表按照时间先后依次由上到下排列，每次发送对话内容之后，对话列表应始终在最新对话位置。

解决方案

注意：多方对话需要使用webSocket

<div class="input-box"><div class="btn-speak"><i class="icon material-icons" v-html="''"></i></div><a-input ref="input" placeholder="请输入..." v-model.trim="message" @keyup.13="sendMessage" /><div class="btn-words" :class="disposal.wordsStatus?'active':''" @click="openWords"><words-icon class="icon" /></div>
</div>// 发送对话
sendMessage(){... / 省略无法代码// 发送对话内容成功后清空输入内容this.message = '';...
}// 刷新对话消息
messageSocket(jqbh){if ("WebSocket" in window){var ws = new WebSocket("ws://10.20.10.190:9989/dispatch/handleMsg/" + jqbh);// webSocket收到推送信息ws.onmessage = function (evt){ //console.log("接收到的数据:");//console.log(evt);const data = evt.data;let message = JSON.parse(data).messageData;message.xxnr = JSON.parse(message.xxnr);// 添加信息this.mesList.push(message);// 对话面板滚动至最新消息位置this.setDialogueScroll();};} else{// 浏览器不支持 WebSocketalert("您的浏览器不支持 WebSocket，讲无法为您实时更新对话内容!");}
}// 滚动对话面板至最新内容
setDialogueScroll(){this.$nextTick(function(){const dialoguePanel = document.getElementById('dialogue');const dialogueList = dialoguePanel.firstChild;const list = dialogueList.firstChild;dialogueList.scrollTop = list.clientHeight - dialogueList.clientHeight;})
}

对话面板，发送对话之后滚动至最新内容处相关推荐

一款对话网页游戏-对话部分
##一款对话网页游戏–对话 function fontshow(obj,name){//obj是传过来的数据,name是用来区别别人或者自己 //想要实现一条一条出现的对话框,用for循环太快了,所以 ...
BERT生成能力改进：分离对话生成和对话理解
©NLP论文解读原创•作者 | 吴雪梦Shinemon 研究方向 | 计算机视觉导读说明: NLP任务大致可以分为NLU(自然语言理解)和NLG(自然语言生成)两种,NLU负责根据上下文去理解当前 ...
Unity根据文字内容自动滚动显示最新文字
1.在Canvas下创建一个Scroll View. 2.在Scroll View的Content下创建Text. 3.在Content添加组件Vertical Layout Group.Conten ...
王者荣耀赛季更新服务器维护到什么时候,王者荣耀赛季更新到几点？s24维护公告最新内容一览[多图]...
王者荣耀24赛季的停机更新会持续到什么时候?6月23日的更新维护还在进行中,玩家们现在时不能进入游戏的,等更新结束之后才能玩,具体更新的时间114小编会在下面分享给大家,还有这次赛季的更新内容各位也能 ...
C# Aliyun OSS 获取Bucket列表异常：无法发送具有此谓词类型的内容正文
前言在用vs的NuGet工具安装Aliyun OSS SDK时,如果版本选择错了,当调用部分API时,例如ListBuckets().ListObjects()等会提示异常:无法发送具有此谓词类型 ...
思科ei ccie认证体系最新内容下一代编址IPV6技术最全面的基础详解从零到精通必读
思科ei ccie认证体系最新内容下一代编址IPV6技术最全面的基础详解从零到精通必读 IPv6(Internet Protocol Version 6,因特网协议版本6)是网络层协议的第二代标准协 ...
Swift - 文本输入框内容改变时响应，并获取最新内容
1,问题描述有时我们开发的时候需要先把"确认"按钮初始设置为不可用,当文本框中输入文字以后,再将输入按钮变为可用. 2,实现原理 (1)要检测文本框内容的变化,我们需要让新界面的 ...
Android recyclerview item获焦时更新UI导致列表自动滚动到获焦处
问题场景描述:scrollview嵌套rv,rv item里有edittext,当edittext处于获焦状态时,item中有数据改变导致更新UI时,此时列表会自动滚动到获焦处. 分析原因:更新UI时 ...
【真的】git pull --all 或 git fetch --all取到自己本地所有分支的最新内容
〇,问题背景某项目,假如有100个分支. 我本地,有5个分支,a,b,c,d,e. 我经常需要取别人的最新,所以我现在只能: 先切换到a,然后取最新: 再切换到b,取最新再切换到c,取最新以此类 ...
Android发送短信时短信内容超长处理
Android发送短信时短信内容超长处理一条短信只可容纳70个中文,所以当短信长度超过70个中文字符时程序就要特殊处理了. 通常有两种方式: 一.通过sendTextMessage()方法逐条依次 ...

对话面板，发送对话之后滚动至最新内容处

效果图

需求分析

解决方案

对话面板，发送对话之后滚动至最新内容处相关推荐

最新文章

热门文章