聊天室自动定位到最新信息

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量431 收藏 1
点赞数 1
分类专栏： js 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44162778/article/details/121670210
版权 
//自动定位到最新信息
        this.$nextTick(() => {
          const div = document.getElementById('assPCon');
          div.scrollTop = div.scrollHeight;
        })

注：一定要写在渲染了信息后，才有效果哦

效果图：
请添加图片描述

请添加图片描述

萌新之路
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5app实现进聊天页面自动定位到新消息 最底部
qq_45375420的博客
09-16 1010
方法一：使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置 ` Document SSS SSS SS SS SS SS SS SS SS SS SS SSS SSS SS SS SS SS SS SS SS SS SS
微信公众号开发 实现点击返回按钮就返回到聊天界面
07-10
直接将附件中的代码copy到jsp页面<script>中，用手机微信访问该页面，点击返回按钮时，即可返回到微信聊天列表界面
vue3_聊天窗发送消息，滚动条自动定位到底部
qq_45104829的博客
07-25 701
在做聊天-回复功能的时候，用户发送了消息，后台回复消息后，滚动条还是定位在用户发送的那条消息的位置；后台回复的消息会被遮挡；这时需要将滚动条定位到最下面。
小程序聊天对话，每次都显示最新消息（让页面自动滚动到底部）
weixin_44558497的博客
05-13 3595
//页面自动滚动到底部 pageScrollToBottom:function(){ wx.createSelectorQuery().select('#scrollpage').boundingClientRect(function(rect){ // console.log(rect.height); wx.pageScrollTo({ scrollTop: rect.height, .
模拟聊天室显示语句保持最新显示
anphygvyti09102的博客
07-02 140
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟聊天室显示语句保持最新显示</title> <style> *{ border-collapse: collapse; } .dialog_...
聊天时跳转到最新发送的位置 适用于H5，uniapp，等
Scd666666的博客
01-21 1007
聊天时跳转到最新发送的位置 适用于H5，uniapp，等 标签模块： <template> <view class='intellig'> <view class='intelligBox' id='scrollview'>//最外层包裹的聊天框 这里需要说一点如果那里需要触发就在哪里调一下，为了方便所以封装成一个方法。 需要的方法： // 显示到最下面 scroll(){ //需要触发的方法 this.$nextTick(() => {
聊天室的自动定位显示到底部的方法
ZetaChow
12-31 2939
function func(){window.scroll(0,1000)setTimeout("func()",1000)}//-->将代码放在页面中在BODY的ONLOAD 事件中先触发一次就行了，或则你用其他控件事件来启动函数也可以！window.scroll(0,1000)  //让窗体滚动，第一个参数是横方向像素，第二个参数是纵方向像素。setTimeout("func()"
vue2聊天室，图灵机器人，node爬虫.zip
03-23
爬虫（Web Crawler）是一种自动化程序，用于从互联网上收集信息。其主要功能是访问网页、提取数据并存储，以便后续分析或展示。爬虫通常由搜索引擎、数据挖掘工具、监测系统等应用于网络数据抓取的场景。 爬虫的...
网络编程课程设计报告-Android-Socket-聊天室.doc
03-11
网络编程课程 设计报告 课程名称 java程序设计之网络编程 题 目 Android Socket 聊天室 专 业 信息管理与信息系统 班 级 组 长 副 组 长 组 员 指导教师 目 录 1设计目的 3 2 开发工具和开发环境 3 3 设计原理 3 3.1...
基于nodejs的网络聊天室、爬虫，vue音乐播放器，及php后台开发的管理系统等项目.zip
03-25
爬虫（Web Crawler）是一种自动化程序，用于从互联网上收集信息。其主要功能是访问网页、提取数据并存储，以便后续分析或展示。爬虫通常由搜索引擎、数据挖掘工具、监测系统等应用于网络数据抓取的场景。 爬虫的...
新浪uc官方下载 v3.5.zip
07-17
4. 视频聊天室，新增道具礼物互动功能，玩的更好更快 1、多人临时会话，关闭聊天窗口时不退出，关闭UC时才提示退出会话，并保存聊天记录 2、添加第三方IM账号自动断线重连功能 3、用户名片中的天气情况，增加温度...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
python入门到高级全栈工程师培训视频学习资料；本资料仅用于学习，请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...
移动端聊天（类似微信）——显示最新消息、输入框随内容自适应高度、模仿发送消息后清空输入框并恢复初始高度
weixin_44558497的博客
02-26 3456
ps:对应的html代码请参考我写的https://mp.csdn.net/postedit/87929498   一、显示最新消息即：页面一加载，或发送消息的时候，都能显示最新的消息，让滚动条保持在底部。 参考了：http://www.cnblogs.com/hnyei/archive/2011/09/20/2182199.html  但是他提供的方法中，我试了一下，只有scrollInt...
Unity聊天室问题（一）
ManHua的博客
07-09 357
目标：使用ScrollRect强制滚动条向下滚动 我在ScrollRect中保留了一个可扩展的元素列表，每次添加新元素时，我都会尝试自动滚动到RECT的底部。 我以为把ScrollRect的值为零就可以刷新了，但是发现聊天室的新信息滚动条不会到最下面进行展示。 scrollRect.verticalScrollbar.value = 0; 但是它什么也没做，实际上滚动条没有改变它的值。ScrollRect类自行设置滚动条的值。我尝试让他的位置变化归零还是不可以。 scrollRect.vertical
聊天室的实现（消息实时刷新）
hpugym的专栏
12-29 5618
简单的对话框：实现消息的两秒一刷新，获取消息记录； 页面加载时，消息框中的滑块处于最低端，向上滑动可以查看历史信息，此时刷新信息的时候，不在刷新滑块，使其仍处于最底层，也就是说，当滑块滚动的时候，不在受实时刷新的控制。当输入新的信息的时候，启动滑块的刷新，使其刷新到最底层（当前DIV的最底层）。另外，内容发送会显示发送状态，2秒后自动消失。 代码实现： index.html
vue-cli网页聊天室：当聊天室有新消息时，控制滚动条滚动到底部
一捆铁树枝的博客
01-10 2710
做一个网页聊天室页面，功能需求是：当有新消息出现在聊天室页面时，控制页面滚动条滚动到页面底部； 聊天室页面代码如下： data中的消息列表； messageList: [{ Character: "0", //客服 message: "你好,有什么需要我帮忙的吗？" }, { ...
聊天界面如何实现新消息置底
weixin_42855542的博客
12-03 3652
没怎么写过聊天界面，最近上手的项目要求，在这，进行一下简单的实现过程。有所不足，请多多指教： 然后我们要实现的效果如下： 实现代码如下： html： &lt;ul id="talkArea" style="border: 1px solid;width: 100px;height: 100px;overflow: auto;"&gt;&lt;/ul&gt; &lt;input type="te...
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 382
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue搭建聊天室如何让发送的消息自动定位到最底部，要代码
03-03
好的，以下是一个简单的Vue聊天室的示例代码，可以让您在发送消息时将其自动定位到聊天室的底部： ``` <template> <div class="chat-room"> <div class="messages" ref="messages"> <div v-for="(message, index) in messages" :key="index" class="message"> <p>{{ message }}</p> </div> </div> <div class="input"> <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="请输入消息..."> </div> </div> </template> <script> export default { data() { return { messages: [], newMessage: '' } }, methods: { sendMessage() { if (this.newMessage.trim()) { this.messages.push(this.newMessage) this.newMessage = '' this.$nextTick(() => { this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight }) } } } } </script> <style> .chat-room { display: flex; flex-direction: column; height: 100%; } .messages { overflow-y: scroll; flex-grow: 1; } .message { padding: 10px; margin-bottom: 10px; background-color: #f0f0f0; border-radius: 5px; } .input { margin-top: 10px; } input { padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; width: 100%; } </style> ``` 该示例包括一个messages数组，用于存储已发送的消息，并在用户发送新消息时将其添加到该数组中。 sendMessage() 方法用于将新消息添加到 messages 数组中，并在消息发送后将输入框清空。$nextTick() 方法用于等待Vue渲染完毕后将滚动条定位到底部。 在模板中，我们使用v-for指令遍历messages数组，将每个消息渲染为一个带有类名“message”的div元素。 我们使用 $refs.messages 引用DOM元素，并在发送新消息后使用 $nextTick() 方法将其滚动到底部。 最后，使用 CSS 设置聊天室的外观和布局。 messages 类包含样式 overflow-y:scroll，以使消息列表可滚动，而 message 类包含一些简单的样式，例如填充、边距和背景颜色。 input 类包含样式以设置输入框的外观。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值