Vue向上滚动加载数据时防止内容闪动

已于 2025-02-20 10:34:34 修改
阅读量599 收藏 6
点赞数 10
分类专栏： Vue 文章标签： html css 前端
于 2024-10-15 00:50:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39620552/article/details/142932088
版权

目前的需求：当前组件向上滚动加载数据，dom加载完后，页面的元素位置不能发生变化

遇到的问题：加载完数据后，又把滚轮滚到之前记录的位置时，内容发生闪动

现在的方案：

加载数据之前记录整体滚动条的高度，数据加载完之后把滚动条滚动到之前数据所在的位置；

方案是没有问题，但是特别不友好！dom加载完了之后滚动还是在最上方，页面就会出现内容的变化(显示新加载出来的数据)，这时候再滚动到之前元素的位置还会再次出现内容的变化，（这里我尝试过禁用滚轮事件，但是内容撑开后滚轮还是会变）

重点来了！

这时候就需要使用到 requestAnimationFrame API, 这个API是跟着浏览器的刷新频率来计算的，大概就是一秒60次，它会在下一次渲染之前进行回调

举例说明：刷新之前滚轮高度是500，刷新完dom之后是1200

->>>>>>开始滚动获取数据

->>>>>>开始滚动条高度记录500

->>>>>>获取完数据更新完dom(此时浏览器还没有渲染，但是滚动条高度是1200)

->>>>>>执行requestAnimationFrame回调，把滚动条滚动到刷新之前元素的位置 1200 - 500

->>>>>>渲染

这时候就可以做到很平滑的加载数据！！！！

前端面试Vue部分补充（详细）
小卡拉米的博客
01-13 1538
vue-router跳转可以实现单页应用的无刷新跳转，并且可以利用路由钩子进行一些额外的处理，而location.href则是传统的页面跳转方式，会导致页面的刷新。与MVC和MVP模式不同的是，MVVM模式中的视图模型充当了展示器的角色，并且视图和视图模型之间通过数据绑定实现了双向通信。与MVC模式不同的是，MVP模式中的展示器充当了控制器的角色，负责处理用户输入和更新模型和视图之间的通信。当在Vue中给data中的对象属性添加一个新的属性时，新添加的属性不会被Vue实例观察到，也不会触发视图的更新。
20道高频vue面试题（附答案）
loveX001的博客
07-29 1149
20道高频vue面试题（附答案）
vue滚动加载插件vue-infinite-scroll
热门推荐
thatway的博客
03-02 2万+
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。 https://github.com/ElemeFE/vue-infinite-scroll/ https://www.npmjs.com/package/vue-infinite-scroll 安装 cnpm i vue-infinite...
vue页面加载闪烁问题的解决方法
08-27
主要介绍了vue页面加载闪烁问题的解决方法,文中给大家提到了v-if 和 v-show 的区别，解决vue页面加载时出现{{message}}闪退的两种方法，感兴趣的朋友一起看看吧
vue 向上滑动加载
wangatong的博客
02-14 1454
<template> <div id="app"> <div class="list" v-for="(data,index) in datas" :key="index"> {{data}} </div> <img src="./assets/loading.gif" /> </div> </template> <script> export default {
VUE项目初加载页面闪烁问题
Ride_The_Wind的博客
03-24 9758
一、前言 写项目的会经常使用到v-if进行判断，但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题； 二、解决办法 使用v-cloak，我的理解是：只有编译没完成时才有，用了css将它隐藏，这样编译成功后才显示，所以解决了闪烁问题；大佬给出的解答是：v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。 用
vue 刷新或者加载闪烁
技术改变世界
01-18 2460
1、vue中绑定数据的时候，渲染页面时会出现变量闪烁 div id="app"> h2>{{message}}h2> div> //在页面加载的时候会看到 {{message}} 几秒过后才会渲染数据。 2、解决方案 // 方法一 h2 v-html="{{message}}">h2> //这样就不出现闪烁的问题； // 方法二 h2 v-cloak>{{messa
vue中滚动加载
Zxt0518的博客
11-28 515
安装 vue-infinite-scroll 在main.js中引入 使用 1、v-infinite-scroll="loadMore"表示回调函数是loadMore 2、infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，看清楚，busy表示繁忙，繁忙的时候是不执行的。 3、infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，1
vue3向上加载更多scrollIntoView出现闪动
12-20
在 Vue3 中，当你使用 `scrollIntoView` 功能实现页面滚动到指定元素以便加载更多数据时，可能会遇到一些闪动的问题。这通常是由于浏览器对滚动位置的更新、DOM操作以及虚拟滚动（如无限滚动）之间的同步处理不够...
vue向上无限滚动
最新发布
04-02
在 Vue 中实现向上滚动的无限加载功能，可以通过监听滚动条位置并结合条件触发数据加载逻辑完成。以下是具体的实现方法： #### 1. 基本原理 当用户向上滚动时，检测滚动容器顶部的距离 (`scrollTop`) 是否接近于零...
详解vue数据渲染出现闪烁问题
08-30
本篇文章主要介绍了vue数据渲染出现闪烁问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1513
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
Vue 实现滚动加载
...
01-15 1644
Vue 实现滚动加载
vue解决第一次加载屏幕闪烁问题
rightcat111的博客
08-29 3016
vue解决第一次加载屏幕闪烁问题
vue解决数据加载时,插值表达式闪烁问题
u013008898的博客
03-28 2408
1.在公共的css样式中加入: [v-cloak] { display: none !important; } 2.在el挂载的标签上添加 <div class="#app" v-cloak> <p>{{value.name}}</p> </div> ...
vue项目实现页面上拉滚动加载
名人卷耶
12-27 851
...... <!-- 页面展示 --> <div ref="pageRef" class="contain_block" @scroll="handleScroll"> <el-backtop :visibility-height="100"/> <pageIndex v-if="list && list.length" :list="list"/> <el-empty v-els
vue之上拉滚动加载页面数据
夜阑珊妖妖
09-29 1131
页面结构 <tuijianlp :tuijlpList="tuijlpList" /> //组件 <p class="morelp"> {{ nomore ? "没有更多了" : "正在加载..." }} </p> data() { return { tuijlpList: [], area_id: 3, ...
vue 页面滚动，分页加载数据
m0_69502730的博客
03-20 1532
【代码】vue 页面滚动，分页加载数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值