参考
起因
最近在做一个聊天功能,通过 ref 钩子绑定页面实现滚动底部后出现滚动不到底部的情况,猜测是页面未更新完毕的时候,就将 div 滚动到之前状态的底部。
代码
- html 容器代码, .message-container 容器需要有具体高度。
<div class="message-container" ref="messageContainer"> <a-space direction="vertical" fill> <MessageItemView v-for="i in messages" :key="i" :propIsMe="i.isMe" :propMessage="i.content" /> </a-space> </div>
.message-container { height: calc(100% - 191px); padding: 10px 24px; position: relative; background-color: #fbfcfe; overflow-y: auto; }
- 通过 watch 监听数据更新,并等待页面加载完毕后滚动到 div 底部。
data() { return { messages: [ { type: "text", isMe: false, content: "你好,我是夏秋初。", } ], content: "", }; }, watch: { messages: { handler(newVal, oldName) { /** * 页面更新完毕后再将页面滚动到底部 */ this.$nextTick(() => { this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight; }); }, deep: true, immediate: false, }, },