uni-app商品分类

<template>
	<view class="prices">
		<scroll-view scroll-y="true" class="left">
			<view @click="leftback(index,item.id)" :class="active===index?'active':''" v-for="(item,index) in leftArray" :key="item.id">{{item.title}}</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="right">
			<view v-for="rightItem in rightArray">
				<view>
					<image :src="rightItem.img_url" mode="widthFix"></image>
				</view>
				<view style="padding: 0 10px;">
					{{rightItem.title}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				leftArray:[],
				rightArray:[]
			}
		},
		onLoad() {
			this.leftList();
		},
		methods: {
			async leftList(){
				
				const {data}=await this.request({
					url:"/api/getimgcategory"
				})
				this.leftArray=data.message;
			},
			async leftback(index,id){
				console.log(id)
				this.active=index;
				const {data}=await this.request({
					url:"/api/getimages/"+id
				})
				this.rightArray=data.message;
				if(this.rightArray.length==0){
					
					uni.showToast({
						title:"此分类暂无数据！"
					})
				}
				
				console.log(this.rightArray)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.prices {
		height: 100%;

		scroll-view {
			float: left;
		}

		.left {
			width: 30%;
			height: 100%;

			view {
				height: 60px;
				line-height: 60px;
				font-size: 30rpx;
				text-align: center;
				color: #333;
				border-top: 1px solid #eee;
			}

			.active {
				color: #fff;
				background-color: $uni-color-red;
			}
		}

		.right {
			width:  70%;
			height: 100%;
			line-height: 30px;
		}
	}
</style>