vant组件的van-collapse-item折叠面板有小伙伴讨论一下吗

于 2024-08-02 10:09:17 发布
阅读量170 收藏
点赞数 2
文章标签： 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57813267/article/details/140864880
版权

展开数据是在点开的时候加载渲染上去的，拿到数据只需要一秒，但是渲染要大几秒，就会有个卡顿的效果，我以为是电脑性能不好，在手机试了一下，竟然直接崩溃了我丢

核心代码，也就一个数组，只有二十几条数据，就几个字段

这是组件动态渲染的时候会存在的问题吗

小易不加班.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
van-collapse阻止事件冒泡_关于Vue的事件修饰符
weixin_36212334的博客
01-31 1829
Vue的事件修饰符：.stop阻止事件的冒泡，阻止事件继续传播.prevent阻止事件原来默认事件.capture捕获监听器，可理解为改变冒泡的顺序.self只在事件本身的元素及以上触发，不在子元素的事件链中.once只触发一次.prevent为阻止元素的默认事件，一般有、这些标签原生带有自己的默认事件，在其中的自定义事件中 @click.prevent="fun" ，会阻止原生的默认事件触发；....
vant展示组件中的折叠面板的一些样式修改记录
qq_43597212的博客
06-30 1870
vant折叠面板的修改
uniapp小程序vantweapp折叠面板collapse的使用
最新发布
ITshayebuhui的博客
07-07 338
接下来我将要给大家介绍如何在uniapp小程序中使用折叠面板，当然了，想要使用vant组件，需要先在uniapp中配置vantweapp组件，这个我之前的博客有，1.下面的是html代码,和官网文档的有出入，官方文档的需要改一下,不能直接使用。这个折叠版也是可以弄双重折叠面板，也就是里面再包一层，下面是全部代码。这个是vant-weapp官方文档。2.接下来的是srcipt部分。
原生小程序自定义vantUI中van-collapse手风琴组件的标题
文龙刚的博客
04-24 609
【代码】原生小程序自定义vantUI中van-collapse手风琴组件的标题。
van-collapse折叠面板组件使用
m0_46577631的博客
05-25 3329
折叠面板的使用 话不多说，我们直接看代码吧，里面的数据就是自己随便写的，可以根据自己实际情况来！ <template> <div> <van-collapse v-if="affairArray.length>4" v-model="activeNames"> <van-collapse-item name="1"> <t
vant折叠面板collapse控件不生效
liyanxu92的博客
06-16 2730
v-model关键字写错导致vant折叠面板collapse控件不生效
van-collapse组件动态循环子展开项数组，改变数组，新的项点击展开无效问题
weixin_45177235的博客
10-09 616
van-collapse组件动态循环子展开项，新加入数组项，展开无效
vant 自定义 van-dropdown-item的用法
10-15
`van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-item` 提供了基础的样式和行为。然而，为了实现更复杂或个性化的布局，我们需要对其进行...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...
详解mpvue中使用vant时需要注意的onChange事件的坑
11-27
最近用了一下Vant Weapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index" } 2.通过value控制展开的面板列表，ac
vue element-UI使用el-select时@change不能触发的解决方案（通过el-option @click.native原生方法）
热门推荐
★【World Of Moshow 郑锴】★
10-18 3万+
前言 在下刚入门VUE不久，最近有个项目的页面进行了VUE改造，使用的是 element-UI ，其中有个功能如下，有一下拉选择列表：证书类别，选择其中某个证书类别，自动根据证书类别设置的前缀填写到证书编号的输入框中去。 按道理这是一个onChange事件，也就是el-select的@Change事件可以搞定，但是却多次输出的undefined，最后通过改变思路，使用了el-option的@click.native的原生方法来实现。 源代码+解决方案 源代码+解决方案一起验证，忽略其他细节不看，我们可以发
Vant 的collapse折叠面板的使用，解决循环，迭代，点击全部展开，点击单个展开
u013017173的博客
09-02 1万+
Vant 的collapse折叠面板的使用，解决循环，迭代，点击全部展开，点击单个展开 1.点击某个折叠，其他折叠也展开，v-for写在van-collapse 里 name不起作用。 <van-collapse v-model="activeName" v-for="item in textList" :key="item.index" > <van-collapse-item name=""> 2.点击某个折叠，只展示单个折叠其他不受影响，v-for写在van-colla
vue 使用vant折叠面板自定义内容
夏夏
12-09 4589
效果图： Collapse 折叠面板 介绍 将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。 引入 import Vue from 'vue'; import { Collapse, CollapseItem } from 'vant'; Vue.use(Collapse); Vue.use(CollapseItem); 代码演示 基础用法 通过v-model控制展开的面板列表，activeNames为数组格式。 <van-collapse...
Vant Collapse控件；解决同时折叠问题；已解决
qq_41812381的博客
02-22 995
本人已解决 真实有效,效果图 <van-collapse v-model="item.PurchaseID" accordion>这一行加上v-model="item.PurchaseID" accordion
Vue遇到的问题记录
一茗道人 ~~ ~ 阿亮-的博客
05-27 7943
使用v-for的时候，出现了重复的key，导致控制台报错，但控件能正常渲染。1.2 解决办法检查key是否存在重复，引号内则为重复的key，修改key为唯一值即可。
van-collapse组件如何判断折叠面板的状态
xt190224的博客
11-25 1367
van-collapse组件如何判断折叠面板的状态
vant weapp 折叠面板不能关闭
X_Flandre的博客
07-30 984
这里我只用了监听打开与关闭这两个事件,但发现打开后就一直关闭不了,但是关闭的回调又执行了 <van-collapse bind:open="collapseOpen" bind:close="closeCollapse" accordion value="{{ activeName }}" border='{{false}}'></van-collapse> 这时查看官网案例,发现他是三个事件都有使用 然后你只需要加一个切换面板的事件就可以正常切换了 <van-c
uniapp小程序把vant 组件库van-collapse的箭头放在左边
06-08
要把vant组件库van-collapse的箭头放在左边，可以通过以下步骤实现： 1. 在使用van-collapse组件的地方，添加一个`custom-class`属性，用于自定义组件的样式类，例如：`<van-collapse custom-class="my-collapse">`。 2. 在页面的样式文件中，添加以下代码： ```css .my-collapse .van-collapse-item__header { flex-direction: row-reverse; /* 将折叠面板标题和箭头的方向改为水平方向 */ justify-content: flex-start; /* 将折叠面板标题和箭头左对齐 */ } .my-collapse .van-collapse-item__header .van-icon { margin-left: 5px; /* 调整箭头和标题之间的间距 */ margin-right: 0; /* 去掉箭头右边的默认间距 */ } ``` 这样就可以将van-collapse组件的箭头放在左边了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值