在vue开发聊天界面时，发现用户发送图片后，聊天内容总是无法显示在最下方，导致这个问题的原因可能是，图片本身加载是需要时间的，这个过程是异步加载，图片还未加载完，页面就执行偏移操作了，这种情况可以使用onload()事件，等图片加载完成后，再设置聊天窗口的位置
<el-image @load="loadImg"></el-image>
loadImg(){
this.$nextTick(() => {
let msg = this.$refs.messageBox;
msg.scrollTop = msg.scrollHeight - msg.clientHeight;
});
}
在vue开发聊天界面时，发现用户发送图片后，聊天内容总是无法显示在最下方，导致这个问题的原因可能是，图片本身加载是...
代码项目github地址 IMAlbum 一、业务场景 1、聊天界面发送图片==>多选点选+有右上角"发送"+图片...
背景 在Vue项目中通过data设置图片路径，然后在template中引入后页面无法显示图片。直接在页面用相同的路...
索引 友情提示:点击下方超链接, 开启新页面后, 会自动定位到对应的位置.也可以直接复制想看的内容, 使用 Com...
1.首先打开vscode编辑器，点击下方图片处 2.选择为vue页面配置语言模式，一般是Vue页面代码没有颜色 3...
具体场景：在H5页面点击“在线客服”按钮(如图：右下角），跳转到公众号聊天界面，并自动发送一条信息 路径：公众号菜...
项目需求： 实时聊天，发送文字，图片，以及文件 （该项目使用vant + vue 搭建） 首先，聊天也是我第一...
聊天界面向后台发送图片时，发现选择相册图片会出现图片翻转的现象，调用相机拍照上传时，照片由于过大，导致界面交互缓慢...
详细功能介绍更新ing 一、主页面 二、兼职详情页 三、在线报名表单 四、自动弹出短信发送界面 五、兼职发布界面 ...
在Vue项目中通过data设置图片路径，然后在template中引入后页面无法显示图片，浏览器控制台报错： 刚开始...
本文标题：vue中聊天界面发送图片无法自动定位到页面最下方
本文链接：https://www.haomeiwen.com/subject/lsddbltx.html
网友评论