uniProject/pages/study/catalogue.vue

<template>
	<view>
		<view>
			<uni-icons type="left" size="30" @click="handleBack"></uni-icons>
		</view>
		<view>
			<uni-collapse ref="collapse" v-model="value">
				<uni-collapse-item :title="item.label" v-for="(item,index) in list" class="parent-item">
					<template v-slot:title>
						<uni-list>
							<view class="title-layout">
								<view>
									<uni-badge class="uni-badge-left-margin" :text="index+1" type="primary" />
									<text>{{item.label}}</text>
								</view>
								<uni-icons type="locked-filled" size="16" style="justify-self: flex-end;"></uni-icons>
							</view>
						</uni-list>
					</template>
					<view class="content">
						<view class="text child-item" v-for="(citem,cIndex) in item.children">{{index+1}}.{{cIndex+1}}
							{{citem.label}}</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	
	const activeCollapse = ref('');

	const list = [{
			label: '时、分、秒',
			lock: false,
			children: [],
		},
		{
			label: '测量',
			lock: false,
			children: [{
					label: '长度中的隐含条件',
					index: 1,
				},
				{
					label: '解决重叠问题',
					index: 2,
				},
				{
					label: '列表法解决方案问题',
					index: 3,
				},
				{
					label: '单元测试',
					index: 4,
				},
			]
		},
		{
			label: '万以内的加法和减法(一)',
			lock: false,
			children: []
		},
		{
			label: '万以内的加法和减法(二)',
			lock: false,
			children: []
		},
		{
			label: '倍的人事',
			lock: false,
			children: []
		},
		{
			label: '多位数乘一位数',
			lock: false,
			children: []
		}
	]

	function handleBack() {
		uni.navigateBack();
	}

</script>

<style lang="scss" scoped>
	.parent-item {
		.title-layout {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px
		}
	}

	.child-item {
		padding: 10px;
	}
</style>