Vue聊天框默认滚动到底部

本文介绍了在Vue中实现聊天框每当有新消息时自动滚动到底部的功能。核心原理是利用数据变化监听和DOM更新后的时机,设置滚动条的高度为最大高度,确保用户始终能看到最新消息。通过了解`scrollTop`和`scrollHeight`属性,可以实现聊天窗口的正确滚动。
摘要由CSDN通过智能技术生成

功能场景

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

实现原理

通过每一次的数据变化,只要数据变化,将滚动的最大高度赋值给滚动条的最大高度。
scrollHeight:滚动条高度
scrollTop: 距离最顶部高度

实现过程

在vue中

<!-- 这是一个简易的范例,重点突出自动滚动底部 -->
<template>
  <div>
    <!-- 聊天窗体 -->
    <div class="test" id="gundong"></div>
    <!-- 输入窗体 -->
    <el-input></el-input>
    <!-- 确认按钮 -->
    <el-button @click="take">发送</el-button>
  </div>
</template>
<script>
export default {
  name: 'scroll',
  data () {
    return {
      chat: [
        {info: '聊天内容,触发后push一
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值