jigesi/pages/mall/index1.vue

<template>
	<view class="">
		<navBar title="分类" :back="false" color="white" background="green" />

		<view class="container">
			<view class="category-list">
				<scroll-view class="category-scrollview" scroll-x>
					<view class="category-item" v-for="(item, index) in categoryList" :key="index"
						@click="selectCategory(item)">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in selectedCategory.goodsList" :key="index">
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				categoryList: [{
						name: "分类1",
						goodsList: [{
							name: "商品1"
						}, {
							name: "商品2"
						}, {
							name: "商品3"
						}]
					},
					{
						name: "分类2",
						goodsList: [{
							name: "商品4"
						}, {
							name: "商品5"
						}, {
							name: "商品6"
						}]
					},
					{
						name: "分类3",
						goodsList: [{
							name: "商品7"
						}, {
							name: "商品8"
						}, {
							name: "商品9"
						}]
					}
				],
				selectedCategory: {}
			}
		},
		methods: {
			selectCategory(category) {
				this.selectedCategory = category;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>