<template>
	<view class="view-category">
		<d-navbar title="分类列表" :isBack="true"></d-navbar>

		<view style="height: 10px;background: #f2f2f2;"></view>

		<view class="category-wrapper">
			<view class="container-left">
				<scroll-view class="container-left-sv" scroll-y>
					<view class="container-left-sv-box my-flex" v-for="item,index in navList" :key="index"
						:class="navListIndex==index?'active':''" @click="onClickLeftItem(item,index)">
						<view class="container-left-sv-box-ab" v-if="navListIndex==index"></view>
						<view class="my-flex container-left-sv-box-text" :class="navListIndex==index?'active':''">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="container-right">
				<scroll-view class="container-right-sv" scroll-y>
					<view v-if="navList[navListIndex].tmp_type==1" class="right-tmp-one">
						<view class="right-tmp-one-box my-flex" v-for="itemOne,indexOne in navList[navListIndex].childList" :key="indexOne">
							{{itemOne.title}}
						</view>
					</view>
					
					<view v-else class="right-tmp-two">
						<view class="right-tmp-two-box my-flex" v-for="itemOne,indexOne in navList[navListIndex].childList" :key="indexOne">
							<view class="right-tmp-two-box-title">
								{{itemOne.title}}
							</view>
							<view class="right-tmp-two-box-tag">
								标签 丨
							</view>
						</view>
					</view>

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


		<d-public></d-public>

	</view>
</template>

<script>
	export default {
		computed: {
			userFind() {
				return this.$store.state.userFind
			}
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				list_rows: 10,
				page: 1,
				navListIndex: 0,
				
				navList: [{
					title: '会内职务1',
					id: 0,
					tmp_type: 2,
					childList: [{
							title: '会长1',
						},
						{
							title: '会长2',
						},
						{
							title: '会长3',
						},
						{
							title: '会长4',
						},
						{
							title: '会长5',
						},
					]
				}, {
					title: '会内职务1',
					id: 0,
					tmp_type: 1,
					childList: [{
							title: '会长1',
						},
						{
							title: '会长2',
						},
						{
							title: '会长3',
						},
						{
							title: '会长4',
						},
						{
							title: '会长5',
						},
					]
				}, {
					title: '会内职务1',
					id: 0,
					tmp_type: 1,
					childList: [{
							title: '会长1',
						},
						{
							title: '会长2',
						},
						{
							title: '会长3',
						},
						{
							title: '会长4',
						},
						{
							title: '会长5',
						},
					]
				}, {
					title: '会内职务4',
					id: 0,
					tmp_type: 2,
					childList: [{
							title: '会长1',
						},
						{
							title: '会长2',
						},
						{
							title: '会长3',
						},
						{
							title: '会长4',
						},
						{
							title: '会长5',
						},
					]
				}, ]
			};
		},

		//	页面加载
		onLoad(options) {
			console.log(options)
		},
		//	页面显示
		onShow() {
			this._init_api()
		},
		//	页面隐藏
		onHide() {

		},
		//	页面卸载
		onUnload() {

		},
		//	页面下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);

		},
		//	点击分享
		// onShareAppMessage() {

		// },
		//	监听页面滚动	页面在垂直方向已滚动的距离（单位px）
		onPageScroll() {

		},
		//	监听页面返回
		onBackPress(options) {

		},
		/**
		 * 上拉加载
		 */
		onReachBottom() {
			console.log('上拉加载')

		},
		methods: {
			_init_api() {

			},
			onClickLeftItem(item, index) {
				this.navListIndex = index

			}

		}
	}
</script>

<style>
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss">
	.view-category {

		.category-wrapper {
			height: calc(100vh - 55px);
			display: flex;

			.container-left {
				width: 200rpx;
				height: 100%;
				margin: 0 20rpx 0 20rpx;

				.container-left-sv {
					height: calc(100vh - 55px);
					background: #fff;

					.container-left-sv-box {
						width: 100%;
						height: 100rpx;
						margin-bottom: 1px;
						position: relative;
						background: #fff;

						&.active {
							background: #f2f2f2;
						}

						.container-left-sv-box-ab {
							position: absolute;
							left: 0;
							width: 6rpx;
							height: 50rpx;
							background: red;
							border-radius: 10rpx;

						}

						.container-left-sv-box-text {
							font-size: 16px;
							color: #666;

							&.active {
								color: red;
							}
						}
					}
				}
			}

			.container-right {
				flex: 1;
				height: 100%;
				padding-right: 20rpx;
				.container-right-sv {
					height: calc(100vh - 55px);
					
					.right-tmp-one {
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.right-tmp-one-box {
							width: 45%;
							height: 70rpx;
							background: #fff;
							margin: 10rpx;
							color: #666;
							border-radius: 10rpx;
							font-size: 14px;
							
						}
					}
					
					.right-tmp-two {
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.right-tmp-two-box {
							width: 100%;
							background: #fff;
							margin: 10rpx;
							color: #666;
							border-radius: 10rpx;
							font-size: 14px;
							display: flex;
							flex-direction: column;
							padding: 20rpx 20rpx;
							
							.right-tmp-two-box-title {
								width: 100%;
								color: #000;
								font-size: 14px;
								// font-weight: bold;
							}
							
							.right-tmp-two-box-tag {
								width: 100%;
								font-size: 12px;
								margin-top: 10rpx;
							}
						}
					}

				}
			}
		}


	}
</style>

✅ Copy success!
copy