小程序商品列表布局（存在二级联动）

 

二级联动需要找区分每组数据的特殊的值。利用每组数据的下标，通过计算属性computed:{  }，创建cateObj对象

computed:{//计算属性
			cateObj(){//二级联动，通过下标寻找相应数据
				console.log(this.categoryDatas[this.navIndex]);//输出数据，用来测试取数据是否成功，方便查找数据
				return this.categoryDatas[this.navIndex] //navIndex是点谁谁高亮的标记等于下标
			}
		},
mounted() {
			this.getCategory();
		},
methods:{
			async getCategory(){
				const res= await request('/getCategoryDatas');
				console.log(res);
				this.categoryDatas=res.categoryDatas;
			},
			//点击切换下标
			changeNavIndex(index){
				this.navIndex = index;
			}
		}

<view class="right">
				<scroll-view class="categoryScroll" scroll-y="true" >
					<!-- 大图 -->
					<image class="cateImg" :src="cateObj.imgUrl" mode=""></image>
					<!-- 列表 -->
					<view class="goodsList">
						<view class="goodsItem" v-for="item in cateObj.subCateList" :key="iem.id">
							<image class="goodsImg" :src="item.wapBannerUrl" mode=""></image>
							<view class="goodsName">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>