uniapp分类列表(简易)

<template>
	<view class="containar">
		<!-- 案例分享 -->
		<view class="typeAndList">
			<scroll-view class="type" scroll-y="true" :style="{ height: wh + 'px' }">
				<!-- <view class="type"> -->
				<view class="typeItem" :class="checkId == item.id ? 'checked' : ''" v-for="item in typeList" :key="item.id"
					@click="choose(item.id)">
					<view class="active" v-show="checkId == item.id"></view>
					<view class="item">{{ item.label }}</view>

				</view>
				<!-- </view> -->
			</scroll-view>
			<scroll-view scroll-y="true" class="list" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
				<view class="typeItemBox" v-for="(item2, i2) in cateLevel2" :key="i2">
					<view class="typeName">{{ item2.name }}</view>
					<view class="boxList">
						<view class="box" v-for="(item3, i3) in item2.children" :key="i3">
							<view style="width: 162rpx;
							height: 162rpx;border: 2rpx solid red;"></view>
							<!-- <img src="@/static/imgs/mpbg.jpg" alt=""> -->
							<view class="contBox">
								<view class="title">{{ item3.name }}</view>
								<view class="intro">{{ item3.detail }}</view>
								<view class="btnBox">
									<view class="btn">查看</view>
								</view>

							</view>
						</view>

					</view>


				</view>
			</scroll-view>
		</view>

	</view>
</template>
<script>

export default {
	data() {
		return {
			// 当前设备可用的高度
			wh: 0,
			scrollTop: 0,
			typeList: [
				{
					label: '案例类型', id: '1',
					children: [
						{
							name: '港珠澳大桥1',
							children: [
								{ name: '港珠澳大桥', detail: '这个项目非常好……' },
								{ name: '港珠澳大桥', detail: '这个项目非常好……' },
							]
						},
					]

				},
				{
					label: '案例类型', id: '2',
					children: [
						{
							name: '港珠澳大桥2',
							children: [
								{ name: '港珠澳大桥', detail: '这个项目非常好……' },
								{ name: '港珠澳大桥', detail: '这个项目非常好……' },
								{ name: '港珠澳大桥', detail: '这个项目非常好……' },
							]
						},
					]

				},
			],
			cateList: [],
			// 二级分类的列表
			cateLevel2: [],
			checkId: "1"

		}
	},
	methods: {
		choose(id) {
			this.checkId = id
			this.typeList.forEach(item => {
				if (item.id == id) {
					this.cateLevel2 = item.children
				}

			});
			this.scrollTop = this.scrollTop === 0 ? 1 : 0
			console.log(this.cateLevel2);
		},
		getCateList() {
			this.cateLevel2 = this.typeList[0].children
			console.log(this.cateLevel2);
		}

	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.wh = sysInfo.windowHeight - 50

		this.getCateList()
	},
}

</script>
<style lang="less" scoped>
.containar {
	.typeAndList {
		display: flex;
		justify-content: space-between;

		.type {
			width: 158rpx;
			background: #f8f8f8;
			border-radius: 0 25rpx 0 0;

			.typeItem {
				width: 100%;
				height: 152rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #9a9a9a;

				.active {
					width: 8rpx;
					height: 48rpx;
					background: #294994;
				}

				.item {
					width: 130rpx;
					padding: 0 10rpx;
					text-align: left;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 24rpx;

				}



			}

			.checked {
				background: #ffffff;
				color: #302e27 !important;
			}
		}

		.list {
			width: 544rpx;
			padding: 0 24rpx;

			.typeItemBox {
				.typeName {
					padding: 18rpx 0;
					color: #2d2e2e;
					font-size: 24rpx;
					position: sticky;
					top: 0;
					background: #ffffff;
				}

				.boxList {
					.box {
						width: 100%;
						display: flex;
						justify-content: start;
						margin-bottom: 18rpx;

						img {
							width: 162rpx;
							height: 162rpx;
							border-radius: 25rpx;
						}

						.contBox {
							width: 406rpx;

							padding-left: 22rpx;

							.title {
								width: 100%;
								overflow: hidden;
								font-weight: 700;
								font-size: 24rpx;
								margin-bottom: 8rpx;
							}

							.intro {
								color: #a9b7c8;
								font-size: 22rpx;
								height: 80rpx;
								overflow: hidden;
							}

							.btnBox {

								display: flex;
								justify-content: flex-end;

								.btn {
									height: 36rpx;
									padding: 0 10rpx;
									text-align: center;
									line-height: 36rpx;
									font-size: 24rpx;
									border-radius: 25rpx;
									background: #294994;
									color: #fff;
								}
							}
						}

					}
				}
			}

		}

	}
}
</style>