解决即时通讯发送图片时滚动条不能完全滚到底部问题(简单粗暴)

以下是滚动条置底的函数,发送文字和文件的时候可正常使用。

但发送图片时,因为图片还没完全加载完就调用了函数,所以滚动条并没有完全拉到底。

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>

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值