uni-app商品分类

<template>
	<view class="classify">
		<!-- 分类部分 -->
		<view class="cate-left">
			<view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{
   {item.classifyName}}</view>
		</view>

		<view class="cate-right">
			<view class="cate-content" v-for="(it,id) in 30" :key="id" @click="getto(it)">
				<image src="../../static/images/userinfo.jpg" mode=""></image>
				<view class="cate-text">好东西</view>
			</view>
		</view>
	</view>
</template>

<script> export default {
       data() {
       return {
       scrollTop: 0, // 初始化的分类列表 cateList: [{
       classifyName: '女装', id: 1 }, {
       classifyName: '洗护', id: 2 }, {
       classifyName: '内衣', id: 3 }, {
       classifyName: '百货', id: 4 }, {
       classifyName: '饰品', id: 5 }, {
       classifyName: '母婴', id: 6 }, {
       classifyName: '数码', id: 7 }, {
       classifyName: '食品', id: 8 }, {
       classifyName: '电器', id: 9 }, {
       classifyName: '进口', id: 10 }, {
       classifyName: '手机', id: 11 }, {
       classifyName: '家装', id: 12 }, {
       classifyName: '美妆', id: 13 }], // 当前点击项的索引号 activeIndex: 0, // 分类下的商品信息 goodList: [] }; }, methods: {
       async getcateList() {
       const res = await uni.$http.get('/classify') console.log(res) const {
       data: {
       classify, code } } = res if (code != 200) {
       return uni.showToast({
       title: '加载数据失败', duration: 1000, icon: 'none' }) } else {
       this.cateList = classify // 获取第一个分类下的商品 this.goodList = classify[0].children } }, //更改点击项的索引号 changeActive(i) {
       this.activeIndex = i // 已经获取到索引号 this.goodList = this.cateList[i].children }, //点击搜索框跳转到搜索页面 getto(it) {
       console.log(it,123) uni.navigateTo({
       url: '/pages-zzfw/productDisplay-detail/productDisplay-detail' }) }, }, onLoad() {
       // this.getcateList() } } </script>

<style lang="scss" scoped> .classify {
       background-color: #fff; width: 100%; height: 100%; display: flex; justify-content: space-between; .cate-left {
       width: 200rpx; height: 100vh; overflow: auto; background-color: #F6F6F6; .cate-item {
       width: 100%; height: 100rpx; line-height: 100rpx; padding-left: 40rpx; box-sizing: border-box; } .active {
       background-color: #FFFFFF; position: relative; padding-left: 40rpx; box-sizing: border-box; &::before {
       content: ''; display: block; width: 5rpx; border-radius: 6rpx; height: 50rpx; background-color: #FC4353; position: absolute; left: 5rpx; top: 30rpx; } } } .cate-right {
       width: 80%; height: 100vh; overflow: auto; .cate-content {
       float: left; width: 28%; height: 185rpx; text-align: center; margin: 20rpx 0 0 15rpx; padding: 5rpx; background: #f1f1f1; border-radius: 20rpx; image {
       width: 100rpx; height: 100rpx; } .cate-text {
       font-size: 34rpx; } } } } </style>