display:none；导致的Vant中list组件第一次不加载数据的问题

最新推荐文章于 2024-11-13 17:13:10 发布
原创 最新推荐文章于 2024-11-13 17:13:10 发布 · 563 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #前端
文章讲述了在Vue3中使用VantList组件时遇到的初次load事件未触发问题，原因是组件初始状态为display:none。通过在父组件上添加v-if根据modelValue切换显示状态，解决了数据初次渲染问题，显示:none是关键因素。

在vue3中结合vant使用list组件时发现第一次的load事件没有触发，导致第一次本应填充满组件父级的高度的数据没有渲染到组件中。

在百度的过程中，提及的都是父组件高度设为小于100%啥的发现没用。之后考虑到可能是组件初始为display:none；因此在display改为block的时候他就没有渲染。

我当时的场景时当变量modelValue值为false的时候为display:none;

modelValue值为true的时候display:block;因此我在list的父组件上加了个v-if="modelValue"这样就会在display:block；时才会渲染组件，而结果确实解决了第一次不加载数据的问题，相比其原因就是display:none所致

firewrk
关注
display:none; 失效原因
harry_yaya的博客
06-14 2万+
可能是元素之前已经设置了 display的类型，例如： .icon-openEye{ display:inline-block; position: relative; left: -12%; width: 22px; height: 22px; } 此时，我再通过jQuery的方法为该元素添加一个none的class. $('.icon-openEye').addClass('non...
“ display：none”会阻止图像加载吗？
xfxf996的博客
07-29 2273
Every responsive website development tutorial recommends using the display:none CSS property to hid
easyUI-datagrid属性设置display：none，加载数据或表头不显示
sum__mer的专栏
01-13 1万+
页面有三个选项卡，datagrid在第三个选项卡中，初始化时，第三个选项卡display：none ，加载数据或表头时，datagrid数据或表头不显示。 如果初始化时，第三个选项卡不设置隐藏（display：block或display：‘ ’），则datagrid数据正常显示，解决方法为： 在js中，显示当前div的时候，执行这条代码$("#tableid").datagrid("resiz
vant中list加载异常问题
qq_45208029的博客
05-13 1893
最近看list加载问题看了好久，也想了很多方法，最后自己又写了一个小demo，你们可以试一下 <template> <div class="home"> <van-tabs v-model="active" @change="change"> <van-tab title="标签 1"></van-tab> <van-tab title="标签 2"></van-tab> &l
vue vant-list 加载问题汇总
yeyazi001的博客
08-11 3534
vue vant-list 加载问题汇总
vue + vant 之 List列表组件 首次不触发 onLoad 事件
weixin_47409897的博客
04-18 3498
目录vue + vant 之 List列表组件 首次不触发 onLoad 事件 vue + vant 之 List列表组件 首次不触发 onLoad 事件 immediate-check设置为flase即可 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有
vant-list上滑加载，数据重复，加载后返回顶部，或者不加载更多数据
qq_42440919的博客
11-17 4219
list上拉加载
vant制作首页的加载中和暂无数据
NanChen的博客
01-11 1927
<!-- 判断每一页是否有数据，没有则返回暂无数据 --> <div v-if="newsItems[index].list.length > 0"> </div> 首先先给数据添加一层div判断是否此页能请求到对应数量的数组，能请求则输出 <!-- 页面加载 --> <div class="loading" v-else-if="newsItems[index].forward ==='be...
vue vant-list 加载问题（重复加载，首次加载，不加载，通页面多个下拉加载问题）
qq_17627195的博客
11-04 1万+
主要需要注意以下几点 是否正确设置this.loading=false;。 （因为每次加载函数执行的时候，this.loading 会自动变为 true， 如果不设置为 false 则不会继续加载）。 需要给van-list增加 :immediate-check=“false” 属性，不要让他首次加载，然后在 created() {} 里面进行首次加载（这样可以放置首次加载出现多次加载的情况） 异步获取到数据后，需要给在元数据的基础上增加数据，可以参考后面的例子代码，注意，要使用 setTimeout((
Vant2框架tab切换list不加载问题（切换后onload不继续触发）
Mr.小灰狼_随笔
07-31 1181
Vant2框架tab切换list不加载问题（切换后onload不继续触发） 遇到的问题： van-list 加载，页面上有个切换的 van-tab，实现切换不同的类型，加载不同的list的功能。 Vant2 的 List 列表 就有个 bug，当切换 tab 的时候，它的 onload 没有自动触发。 然而在当前标签页，如果列表已经加载完毕再去切换，onload 就可以实现自动触发
swiper 父级元素display:none 之bug
weixin_30527143的博客
12-13 369
问题描述: 同一个页面,点击底部tab按钮切换div的显示与隐藏,点击到第四个页面时 轮播图总是不动,出bug function start(){ var mySwiper = new Swiper('.swiper-contain', { autoplay: 3000,//可选选项，自动滑动 speed: 300, loop: true, observer: tr...
vue vant中list首次加载不满一屏会请求两次数据重复（已解决）
明明的博客
12-10 4480
首先把finished 默认为true 然后添加 immediate-check=true <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="true"> </van-list>
Vant 组件没有效果
忘忧
04-20 755
Vant 组件局部引用不生效
vue3.0 vant popup渲染不出来的解决办法
博哥的二进制世界
07-15 1936
遇到这个问下，先检查看看是不是看着vant的2.x版本进行开发。 vant2.x版本代码如下： <van-popup v-model="show" closeable position="bottom" :style="{ height: '30%' }" /> vant3.x版本代码如下： <van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }"
van-list配合查询数据时的显示问题
最新发布
weixin_49914438的博客
11-13 325
点击列表的查询，不输入条件，没有请求完直接点击请求在搜索框中输入不存在的查询条件，列表的数据没有清空。
在new Vue（）加载之前隐藏元素
qq_44277696的博客
09-25 604
Vue的v-cloak 作用：在new Vue（）加载之前，隐藏元素的特殊指令 a. 必须手动在样式表中添加 [v-cloak] {display:none}，[v-cloak] 这个中括号是css的属性选择器，选择所有带有v-cloak的属性 b. 要在暂时隐藏的元素上，添加v-cloak指令。 ...
vant-ui框架 tab切换list不加载问题（切换后onload不触发）
Wangdr的博客
05-09 7915
遇到的问题：项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload就可以实现自动触发 解决办法： tab(i,en){ this.num=i; this.type=en; this.evaluate_list=[];//清空list列表 this.noData=false;//展示列表
vant之van-list的使用以及一些坑的解决方式
热门推荐
rayong的博客
08-21 2万+
文章目录第一步，要使用vant组件，安装好vant，npm i vant -S第二步，在你要用到的地方js中引入，或者在src/main.js里面引入第三步，在template中引用第四步，js中重要代码第五步，解决遇到的坑 第一步，要使用vant组件，安装好vant，npm i vant -S 第二步，在你要用到的地方js中引入，或者在src/main.js里面引入 import Vue from ‘vue‘; import { List } from ‘vant‘; Vue.use(List); 这
vue -vantUI tab切换时 list组件不触发load事件解决办法
weixin_30580341的博客
06-13 1993
最近由于公司项目需要，用vue写了几个简单的页面。用到了vantUI List 列表 瀑布流滚动加载，用于控制长列表的展示 当列表即将滚动到底部时，会触发事件并加载更多列表项。 （页面加载完成后默认会自动加载一次，可以:immediate-check="false" 这样设置一下，页面加载完成后就不会自动加载一次了 ） 看上去一切都很美好；但是tab进行切换的时候，li...
van-list列表后退后@load首次渲染失效问题
upup
08-01 1051
van-list列表首次load失效问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值