uniapp折叠面板，手风琴

demo

htm部分

<template>
	<!-- 折叠面板 -->
	<view class="collapse-box">
		<view class="collapse basic-box" @click="showMore=!showMore">
			<view class="common-flex">
				<view style="width: 95%;">
					<view>我是谁</view>
					<view style="margin-top: 40rpx;">
						你是谁
					</view>
				</view>
				<view class="trangle" :class="showMore ? 'trangle-develop' : ''"></view>
			</view>
			<view class="data-content" :class="showMore ? 'develop' : 'pack-up'">
				<view>乒乒乓乓 乒乒乓乓</view>
				<view>嘿有人敲门</view>
				<view>嘿有人敲门</view>
				<view>谁呀</view>
				<view>我呀</view>
				<view>你是谁</view>
				<view>我是羊</view>
			</view>
		</view>
	</view>
</template>

script部分

<script>
	export default {
		data(){
			return{
				showMore: false
			}
		}
	}
</script>

css部分

<style scoped lang="scss">
	.collapse-box {
		.collapse {
			width: 690rpx;
			min-height: 170rpx;
			background-image: linear-gradient(156deg,
					#e6eeff 0%,
					#ffffff 30%,
					#ffffff 100%);
			border-radius: 20rpx;
			/* 通用留白边box */
			.basic-box {
				width: 100%;
				margin: 20rpx auto 0;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 30rpx;

			
			.common-flex {
				display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.data-content {
				height: 182rpx;
				margin-top: 30rpx;
				color: #0e0e0f;
				text-align: center;
			}
		}
		.trangle {
			width: 0;
			height: 0;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-bottom: 20rpx solid #ddd;
			transform: rotate(0deg);
			transition: all 0.5s;
		}
		.trangle-develop {
			transform: rotate(180deg);
			transition: all 0.5s;
		}
		/* 滑动展开 (说明:此处不设置高度，在原盒子加一个class名设置展开高度) */
		.develop {
			overflow: hidden;
			transition: all 0.5s;
		}
		/* 滑动收起 */
		.pack-up {
			overflow: hidden;
			height: 0 !important;
			transition: all 0.5s;
		}
	}
</style>