vue中实现聊天的功能，vue2+vant；聊天界面滚动条始终在底部，H5中自己写一个聊天

在Vue中实现聊天界面的功能，并使滚动条始终保持在底部，可以通过监听消息的添加和DOM更新，然后使用原生JavaScript方法来滚动到底部。以下是一个简单的示例：

<template>
  <div class="chat-container" ref="chatContainer">
    <div class="messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        {{ message }}
      </div>
    </div>
    <div class="input-container">
      <input v-model="inputMessage" @keyup.enter="sendMessage" type="text" placeholder="输入消息" />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: ''
    };
  },
  watch: {
    messages() {
      this.scrollToBottom();
    }
  },
  methods: {
    sendMessage() {
      if (this.inputMessage.trim() === '') {
        return;
      }
      this.messages.push(this.inputMessage);
      this.inputMessage = '';
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.chatContainer;
        container.scrollTop = container.scrollHeight;
      });
    }
  },
  mounted() {
    this.scrollToBottom();
  }
};
</script>
 
<style scoped>
.chat-container {
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
}
.messages {
  padding-bottom: 50px; /* Leave space for input field */
}
.message {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.input-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: white;
}
input {
  width: 100%;
  padding: 10px;
  margin-right: -1px; /* Align with send button */
  border: none;
  box-sizing: border-box;
}
button {
  width: 100px;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}
</style>

在这个例子中，messages数组用于存储聊天信息，inputMessage用于暂存用户输入的消息。当用户按下Enter键或点击发送按钮时，sendMessage方法会被触发，将输入的消息加入到messages数组中，并清空输入框。

watch属性用于监听messages数组的变化，一旦有新消息加入，scrollToBottom方法会被调用，将滚动条滚动到聊天容器的最底部。

scrollToBottom方法在mounted生命周期钩子中也被调用，确保进入页面时滚动条位于底部。

请注意，这个例子没有考虑性能优化，如节流和防抖发送消息，以及对大量消息的优化渲染。在实际应用中，可能需要考虑这些因素以避免性能问题。