uniapp组件-uni-collapse折叠面板

一时失言乱红尘 2021-07-25 22:37 3160阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=23][https_ext.dcloud.net.cn_plugin_id_23]

## 效果图： ##

![2021030212355630.gif][]

## 代码实现： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<uni-collapse  :accordion="true">
    			<uni-collapse-item title="标题文字1">
    				<text class="content">折叠内容主体，可自定义内容及样式</text>
    			</uni-collapse-item>
    			<uni-collapse-item title="标题文字2" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" :show-animation="true">
    				<text class="content">折叠内容主体，可自定义内容及样式</text>
    			</uni-collapse-item>
    			<uni-collapse-item title="标题文字3" :disabled="true" :open="true">
    				<text class="content">默认展开xxxxxxxxxxx</text>
    			</uni-collapse-item>
    		</uni-collapse>
    	</view>
    </template>
    
    <style>
    	.content {
    		padding: 15px;
    		font-size: 14px;
    		line-height: 20px;
    		background-color: #f9f9f9;
    		color: #666;
    	}
    </style>

[https_ext.dcloud.net.cn_plugin_id_23]: https://ext.dcloud.net.cn/plugin?id=23
[2021030212355630.gif]: /images/20210725/8c73caf37f74436681727892a5b7eb8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210302123643887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，3160人围观）

还没有评论，来说两句吧...

相关阅读

相关 Collapse折叠面板（antd-design组件库）简单使用

1.Collapse折叠面板可以折叠/展开的内容区域。 2.何时使用 ·对复杂区域进行分组和隐藏，保持页面的整洁。 ·手风琴是一种特殊的折叠面板，只允许单个

约定不等于承诺〃/ 2023年10月12日 21:09/ 0 赞/ 92 阅读

相关 MUI accordion（折叠面板）

折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：折叠面板(表单) <ul class="mui-table-view">

﹏ヽ暗。殇╰゛Y/ 2023年07月19日 12:30/ 0 赞/ 91 阅读

相关简易折叠面板

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

秒速五厘米/ 2023年01月19日 11:52/ 0 赞/ 94 阅读

相关 uniapp折叠面板

[uniaap折叠面板官网地址][uniaap]  <uni-collapse @change="change">

淡淡的烟草味﹌/ 2023年01月11日 13:06/ 0 赞/ 444 阅读

相关 Bootstrap教程(25)--折叠面板、折叠面板导航

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1.

谁借莪１个温暖的怀抱￠/ 2022年11月07日 11:42/ 0 赞/ 329 阅读

相关 jQuery 折叠面板

手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。上效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

傷城~/ 2022年05月14日 15:51/ 0 赞/ 454 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 1102 阅读

相关基于vue的简单折叠面板的实现 uniapp自定义样式折叠面板

好叭今天写折叠面板功能~~~ 最近在写uniapp 设计图里面有一个折叠面板功能但是查看了基于uniapp的组件及u-view的折叠面板都无法自定义其标题内容所以只

太过爱你忘了你带给我的痛/ 2021年08月31日 04:22/ 0 赞/ 1781 阅读

相关 vue 实现折叠面板

效果图 ![在这里插入图片描述][20200518095018220.gif_pic_center] 思路其实说是折叠效果，关键是数据的处理， 1：第一行开头

忘是亡心i/ 2021年08月30日 01:50/ 0 赞/ 847 阅读

相关 uniapp组件-uni-collapse折叠面板

官方示例：[https://ext.dcloud.net.cn/plugin?id=23][https_ext.dcloud.net.cn_plugin_id_23] 效果

一时失言乱红尘/ 2021年07月25日 22:37/ 0 赞/ 3161 阅读