Vue 聊天功能中，图片加载完成，页面滚动到底部的解决方式

最新推荐文章于 2024-08-28 15:02:33 发布

凯凯凯凯凯旋

最新推荐文章于 2024-08-28 15:02:33 发布

阅读量959

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/k17775711225/article/details/131509037

版权

省流:用img标签的onload事件重新获取页面高度然后滚动到底部，组件库同理，找他的自定义事件

一、问题描述

聊天功能正常有一个发送内容之后，页面滚动到底部的功能，这里我用的是nextTick，等dom更新完成之后滚动到底部

用这个方法刷新文字这种不需要加载的内容是没问题的，但是图片是需要二次加载的，也就是获取到图片内容之后，他会先等图片出现在dom上，再滚动到底部，图片再加载。

而我们希望他等出现在dom上，图片加载完成之后再滚动到底部。完成效果就如下所示：

二、问题原因

原因很简单，就是一个代码执行顺序的问题，图片加载是异步加载的。解决方法也很简单，用img标签的onload事件重新获取页面高度然后滚动到底部，组件库同理，找他的自定义事件，然后再次触发滚动事件就好了，这里以vant为例

完成后，图片就能在加载完成之后滚动到底部了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

凯凯凯凯凯旋

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js 判断图片是否加载完以及实现图片的预下载

12-01

创建一个Image对象，实现图片的预下载，如果图片已经存在于浏览器缓存，直接调用回调函数，使用onload事件可以判断图片是否加载完成 function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.src = url; if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 callback.call(img); return; // 直接返回，不用再处理onload事件 } img.onload = function () { //图片下载完毕

Vue下滚动到页面底部无限加载数据的示例代码

08-27

本示例代码展示了如何使用 Vue 实现滚动到页面底部无限加载数据的功能，涵盖了 Vue 生命周期、axios 的简单用法、moment.js 格式化日期、图片懒加载、结合原生 js 来写 scroll 事件等技术要点。

1 条评论您还未登录，请先登录后发表或查看评论

Vue信息聊天框首次进入有图片加载滚动到最底部

yuanqi3131的博客

12-16

1107

场景：我们有个聊天室，进入聊天室的话我们的需求是，进入聊天室，滚动到最新信息底部，如果是文字的话，很简单，异步获取数据，然后设置滚动高度即可，我们的使用的是VUE，我们先来操作一下： <template> <div> <div id="service">  </div> </div> </template> <script> export default {

【vue】控制聊天室页面滚动到底部（备份）

k17775711225的博客

07-17

260

【代码】【vue】控制聊天室页面滚动到底部（备份）

js，jquery解决图片加载-滚动底部问题

蜡笔小新1980的博客

01-17

659

让图片加载完成后，再执行滚动函数，避免出现图片加载一半的时候，滚动下来底部只出现半张图片。(适用于不容易找到图片位置的情况，否则直接onload函数即可)

js实现滚动条到底自动加载图片

经验在于积累而不在于年限---dreamboycx

01-29

1466

一、之前Google的图片搜索结果界面提供了一个功能，即滚动条滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的，避免来回翻页的繁琐，让搜索结果以增量形式展现。所以也自己仿造了一个。功能是基于JQuery的。下面是代码。 $(window).scroll(function() { var o = $('#pincontainer'); /

vue实现页面滚动到底部刷新

10-16

在Vue.js框架中，实现页面滚动到底部自动刷新功能，通常用于无限滚动或瀑布流布局，以便用户无需手动翻页即可加载更多数据。以下是一个基于Vue.js的示例，详细解释了如何实现这个功能：首先，创建一个新的Vue实例...

vue进入页面时滚动条始终在底部代码实例

10-17

在Vue.js应用中，有时我们需要实现一个功能，即当用户进入页面时，滚动条自动定位到页面底部。这种场景常见于聊天应用或者实时更新的信息流界面，用户打开页面时就能看到最新的内容。以下是一个详细的教程，指导如何...

vue 中滚动条始终定位在底部的方法

10-18

例如，在聊天应用、实时消息显示或者日志查看等场景中，使滚动条保持在视图的底部，以便用户始终看到最新的内容，是非常常见的功能需求。本文主要介绍在Vue项目中如何实现滚动条始终定位在底部的方法。首先，一种...

vue 每次渲染完页面后div的滚动条保持在最底部的方法

08-27

在Vue.js中，页面的动态内容更新会导致滚动条位置发生变化，特别是在列表或聊天窗口这类高度动态的场景中，用户希望能够保持滚动条在最新的内容区域，即通常所说的“滚动到底部”。为了实现这一功能，Vue提供了几个...

vue 图片加载完成事件

learn8more的博客

08-14

5281

当页面里有ajax请求数据，然后渲染图片的时候，dom会有展开的一瞬，产品觉得无法接受，so... 想到了image的onload事件，当图片加载完成之后再显示页面原生js <img onload="get(this)" src="..." style="display: none"/> <script type="text/javascript"> functi...

使用better-scroll 封装的vue组件不能滚动到底部一种解决方案

jsp13270124的博客

11-20

4795

<template> <div class = 'wrapper' ref = 'wrapper'>   <div class = 'content' ref = 'content'> <...

vue聊天页面在进入之后信息滑动到底部位置

everday_的博客

03-24

1033

聊天信息界面设计

vue使用的图片再在加载成功和未加载成功时的显示问题

qq_63605379的博客

06-17

1831

事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。上面的 onload() 传递加载成功显示的图片。onload 事件在图片加载完成后立即执行。onerror() 传递记载失败显示的图片。先要搞清楚两个图片的方法。

vue实现聊天栏定位到最底部（超简单、可直接复制使用）

weixin_42966151的博客

11-21

2513

通过watch监听聊天内容的加载，一旦加载完成或者数据更新触发vue的数据监听时，就重新修改【滚动滑钮到滚动条顶部的距离=滚动条的高度】，从而实现定位到底部的效果。这里的messnowList是我的消息储存集合，用于判断数据变化，这个可以根据你实际情况修改，通过id绑定刚才的聊天框div，然后修改实现定位底部。新建一个div（聊天框，如下），给他一个id，一会要用到。

vue 聊天框发送消息后滚动条自动到底部

nyf_unknow的博客

05-17

2215

项目场景：智能问答弹框问题描述发送消息后滚动条没有到底部解决方案：获取滚动条所在的dom元素,绑定ref <div class="left-main" ref="left-main">  <div class="left-main-big">   </div&

聊天记录点击加载更多 滚动条位置不变

m0_56325569的博客

12-20

2213

// 滚动条到指定位置 scroll () { this.$nextTick(() => { let msg = document.getElementsByClassName('div')[0] // 获取对象 let distanceFromBottom = msg.scrollHeight - msg.scrollTop - msg.clientHeight msg.scrollTop = distanceFromBotto..

点击滚动到最底部