以下是滚动条置底的函数,发送文字和文件的时候可正常使用。
但发送图片时,因为图片还没完全加载完就调用了函数,所以滚动条并没有完全拉到底。
scrollBottom() {
this.$nextTick(() => {
this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
"myScrollbar"
].wrap.scrollHeight;
});
},
因为聊天消息中,图片大小经过处理,每张图片大小相同,所以我给图片外面套了一个div,然后给了固定高度,这样就算图片没有完全加载出来,高度都是在的,所以不会出现滚动条未拉到底的情况。
<div v-if="i.type=='TIMImageElem'" style="float:left;height:170px">
<el-image
:src="i.payload.imageInfoArray[0].url"
:preview-src-list="[i.payload.imageInfoArray[0].url]"
style="height:150px;margin-top:10px"
></el-image>
</div>