聊天室发送图片消息 不能滚动到最底部问题解决( 图片加载完成前 已经触发了滚动到底部的方法 )

方式1：

如果展示图片的大小固定，在图片标签外嵌套一层盒子，占据一定的高度使其正常滚动到页面底部

方式2：

展示图片的大小不固定，在图片加载完成后调用滚动到底部的方法

注意点2.1

监听消息的接收时，判断如果为图片类型则不需要调用滚动到底部的方法

socket.on('receiveChatMsg', async (res) => {
    chatList.value.push(res)
    // 已读消息
    socket.emit('updateMsgStatus', res.id)
    isScroll.value = true
    if (res.msgType == MsgType.MsgImage) return
    await nextTick
    scrollToBottom()
 })

注意点2.2

下拉获取历史记录的时候，不能执行图片加载完成后所执行的函数， 可以通过flag(默认为true，防止初始化信息的时候 最后一条信息为图片)， 下拉获取记录的时候将其修改为false， 接收消息的时候将其修改为true

const onRefresh = () => {
  socket.emit('getChatMsgList', 20, lastTime.value, route.query.orderId)
  isScroll.value = false
}

socket.on('receiveChatMsg', async (res) => {
    chatList.value.push(res)
    // 已读消息
    socket.emit('updateMsgStatus', res.id)
    isScroll.value = true
    if (res.msgType == MsgType.MsgImage) return
    await nextTick
    scrollToBottom()
 })