uniapp小程序vantweapp折叠面板collapse的使用

接下来我将要给大家介绍如何在uniapp小程序中使用折叠面板，当然了，想要使用vant组件，需要先在uniapp中配置vantweapp组件，这个我之前的博客有，点这里查看

这个是vant-weapp官方文档 点这里

1.下面的是html代码,和官网文档的有出入，官方文档的需要改一下,不能直接使用

<van-collapse :value="activeNames" @change="onChange">
		  <van-collapse-item title="标题1" name="1">
		    代码是写出来给人看的，附带能在机器上运行
		  </van-collapse-item>
		  <van-collapse-item title="标题2" name="2">
		    代码是写出来给人看的，附带能在机器上运行
		  </van-collapse-item>
		  <van-collapse-item title="标题3" name="3" disabled>
		    代码是写出来给人看的，附带能在机器上运行
		  </van-collapse-item>
</van-collapse>

2.接下来的是srcipt部分

<script>
	export default {
		data() {
			return {
				 activeNames: ['1'],//默认自己展开标题1
			}
		},
		methods: {
			onChange(event) {
				this.$set(this, 'activeNames',event.detail);
			},
		}
	}
</script>

 下面的是成功的页面

这个折叠版也是可以弄双重折叠面板，也就是里面再包一层，下面是全部代码

<template>
	<view class="container">
		<view class="c-collapse" v-for="(help, index) in help" :key="index" :name="index">
			<van-collapse :value="help.activeNames" @change="onChange(index, $event)" border="false">
				<van-collapse-item name='0'>
					<view slot="title"><text class="text2">{{ help.Title1 }}</text></view>
					<van-collapse-item v-for="(Item, subIndex) in help.Title2" :key="Item" :name="1+ subIndex"
						border="false">
						<view slot="title"><text class="text3">{{ Item.title }}</text></view>
						<view class="text-contont">
							<text class="text4">{{ Item.text }}</text>
						</view>
					</van-collapse-item>
				</van-collapse-item>
			</van-collapse>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				help: [{
						activeNames: [],
						Title1: '大标题一',
						Title2: [{
								title: '小标题一',
								text: '你好，这里是小标题一'
							},
							{
								title: '小标题二',
								text: '你好，这里是小标题二'
							}

						]
					},
					{
						activeNames: [],
						Title1: '大标题二',
						Title2: [{
								title: '小标题一',
								text: '你好，这里是小标题一'
							},
							{
								title: '小标题二',
								text: '你好，这里是小标题二'
							},
							{
								title: '小标题三',
								text: '你好，这里是小标题三'
							}
						]
					},

					{
						activeNames: [],
						Title1: '大标题三',
						Title2: [{
								title: '小标题一',
								text: '你好，这里是小标题一'
							},
							{
								title: '小标题二',
								text: '你好，这里是小标题二'
							},
							{
								title: '小标题三',
								text: '你好，这里是小标题三'
							},
						]
					}
				]

			}
		},

		methods: {
			onChange(index, event) {
				this.$set(this.help[index], 'activeNames', event.detail);
				
			},
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #0081e8, rgba(38, 228, 130, 0) 45%, #edf7f9);
		margin: 0;
		padding: 0;
		border: 0;
		font-family: "Microsoft YaHei", SimSun;
		font-style: normal;
	}
	.container {
		width: 100%;
		height: 100%;
	
	}
	.c-collapse {
		overflow: hidden;
		width: 94%;
		background-color: pink;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}
	.text2 {
		font-size: 28rpx;
		font-weight: 550;
		color: #1d1d1d;
	}
	
	.text3 {
		font-size: 26rpx;
		color: #909090;
	}
	.text-contont {
		background-color: #fbfbfb;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
	}
	
	.text4 {
		color: #434343;
		text-align: left;
		font-size: 26rpx;
	}


</style>