做项目的时候遇到的这个问题,解决了下拉加载更多之后,加载虽成功,但是加载出来的消息直接撑开了容器,导致直接在容器内显示出了加载出来的消息,且滚动条在顶部,无法继续滚动。
如何修改使其加载后的历史消息溢出容器,且滚动条保持在加载前那条消息的位置?(即 QQ 类似的加载效果)
相关代码如下:
<el-main
@scroll.native="handleScroll"
class="message-box__msg-list"
v-loading="loading"
>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<div
element-loading-spinner="el-icon-loading"
element-loading-text="加载历史消息……"
ref="loadMoreMsg"
style="height: 64px;"
v-loading="loadMoreMsg"
v-show="loadMoreMsg"
></div>
</transition>
<div
:class="['message-box__msg-pop', { 'is-right': item.sendBy }]"
:key="index"
v-for="(item, index) of messageRecord"
>
<el-avatar
:src="item.sendBy ? userInfo.imgUrl : selectedPerson.imgUrl"
style="flex-shrink: 0;"
></el-avatar>
<div
:class="['base-pop', { 'left-pop': !item.sendBy, 'right-pop': item.sendBy }]"
>{{ item.msg }}</div>
</div>
<div ref="msgIntoView"></div>
</el-main>
// 处理滚动
handleScroll(el) {
const top = el.target.scrollTop
const height = el.target.scrollHeight
if (top === 0 && this.msgListSize <= this.msgListTotal) {
this.loadMoreMsg = true
this.msgListSize += 10
this.getMsgRecord().then(err => {
this.loadMoreMsg = false
const newHeight = el.target.scrollHeight
this.$refs.loadMoreMsg.scrollTo(0, newHeight - height)
if (err) {
this.$message.error('获取聊天记录失败,请检查网络是否正常')
}
})
}
},
加载后的历史消息不自动显示在容器中,而是等待用户滚动至容器中。
顶一下,别沉了。