添加新消息的两种清空:
1.用户互动发送
2.客服发送消息
所以我们最后封装一个函数专门处理滚动条到最底部
<!-- 聊天主体区域 -->
<div class="chat-list">
<div v-for="(charItem, index) in list" :key="index">
<!-- 左侧是机器人小思 -->
<div class="chat-item left" v-if="charItem.name !== 'me'">
<van-image
fit="cover"
round
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0kpsqmX61hmZbMXCI-9Edvw7YJYkCX1qtogoRlfCixMNF4dHLkXSKiLVfbMJlXh6z89Q&usqp=CAU"
/>
<div class="chat-pao">{
{ charItem.msg }}</div>
</div>
<!-- 右侧是当前用户 -->
<div class="chat-item right" v-else>
<div class="chat-pao">{
{ charItem.msg }}</div>
<van-image fit="cover" round :src="$store.state.userPhoto" />
</div>
</div>
</div>
methods:{
// 滚动到页面底部
scrollToBottom () {
// 获取到所有的聊天 Item 项
const chatItem = document.querySelectorAll('.chat-item')
// 获取到最后一项对应的 DOM 元素
const lastItem = chatItem[chatItem.length - 1]
// 调用 scrollIntoView() 方法,显示这个元素
lastItem.scrollIntoView({
behavior: 'smooth' // 动画平滑
})
}
}
-
在发布消息 / 接收到消息的时候, 调用
// 滚动到页面底部(每添加一条消息就让滚动条滚到最底部) // 最后一条消息滚动到屏幕范围 // 数据变化->dom更新是异步的,所以获取到的是上一条div // 解决:vue提供了nextTick/或者settTimeOut方法,可以等待dom节点更新完毕后再执行 this.$nextTick(() => { this.scrollToBottom() })
.chat-list {
height: 100%;
overflow-y: scroll;
}
小结
- 获取原生DOM, 调用scrollIntoView方法, 让标签滚到可视窗口
- 如果下面没有更多内容了, 是不一定会滚到头的