uniapp组件-uni-collapse折叠面板

一时失言乱红尘 2021-07-25 22:37 2978阅读 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 条评论，2978人围观）

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

相关阅读

相关 uniapp折叠面板

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

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

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

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

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

相关 MUI-折叠面板效果accordion

在做开发的过程中我们经常用到折叠面板。那我们来看下折叠面板究竟是怎么使用。废话不多说。代码粘下来： <!DOCTYPE html> <html>

小咪咪/ 2022年08月02日 09:58/ 0 赞/ 325 阅读

相关 jQuery 折叠面板

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

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

相关轻松实现折叠面板组件

实现的效果类似element-ui的Collapse折叠面板组件，地址[链接][Link 1]。使用效果 <collapse> <collapse-i

末蓝、/ 2021年09月20日 00:22/ 0 赞/ 390 阅读

相关 uniapp loading 组件

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

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

相关 uniapp组件汇总

1. [Card卡片][Card] 2. [uni-swiper-dot轮播图指示点][uni-swiper-dot] 3. [Section章节标题][Section]

「爱情、让人受尽委屈。」/ 2021年09月07日 06:13/ 0 赞/ 706 阅读

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

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

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

相关 vue 实现折叠面板

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

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

相关 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 赞/ 2979 阅读