uniapp 简易的商品分类垂直分类（单项联动）_uniapp垂直分类

商品分类页经常会用到商品的垂直分类 很多是双向联动的 查了查没有太适合的，就自己写一个了

我的是单项联动 ，左边tabs 是一个接口，右侧的conts根据点击选择的tabs请求第二个接口

这里是实例代码

<template>
	<view class="classbox">
		<!-- 左侧tabs -->
		<view class="tabs">
			<view class="tab alldisplay"  :class="item.id==current?'active' :''"   @click="select(item)" v-for="item in tabslist"  :key="item.id" >{{item.name}}</view>
		</view>
		<!-- 右侧cont -->
		<scroll-view  scroll-y="true" style="height: 100vh;">
			<view class="conts">
				<view class="cont" v-for="item in contlist"  :key="item.id"  @click="tz(item.id,item.name,item)">
					<image :src="item.imgUrl" mode=""></image>
				   <view class="name">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:'',
				tabslist:[],
				contlist:[],
			}
		},
		onLoad() {
			this.gettabslist()
			setTimeout(()=>{
				this.getcontlist(this.tabslist[0].id)
				this.current =this.tabslist[0].id
			},500)	
		},
		methods: {
			gettabslist(){
				this.$http.get('/app/goodsTypeCopy/parentList ', {}).then(res=>{
					if(res.code==200){
						console.log(res.data);
						this.tabslist = res.data
					}
				})
			},
			select(item){
				this.current  =item.id
				this.getcontlist(this.current)
				
			},
			getcontlist(id){
				this.$http.get('/app/goodsTypeCopy/moreListById',{id}).then(res=>{
					if(res.code==200){
						this.contlist = res.data
					}
				})
			},
			tz(id,name,item){
				if(this.current!==2){
					uni.navigateTo({
						url:'/pages/index/chuanglian?id=' + id +'&title=' +name
					})
				}else{
					console.log(item.isHaveSeries);
					if(item.isHaveSeries==0){
						uni.navigateTo({
							url:'/pages/index/chuanglian?id=' + id +'&title=' +name
						})
					}else{
						uni.navigateTo({
							url:'/pages/class/class2?id=' + id +'&title=' +name
						})
					}
					
				}
				
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
	}
	.tabs{
		width: 30%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
	}
	.tab{
		width: 100%;
		height: 80rpx;
	}
	.conts{
		width: 100%;
		min-height: 10vh;
		padding: 26rpx;
		box-sizing: border-box;
		font-size: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.active{
		background: #fff;
	}
	.cont{
		width: 150rpx;
		height: 200rpx;
		margin: 0 20rpx 60rpx 0;
	}
	.cont image{
		width: 150rpx;
		height: 160rpx;
	} 
	.classbox{
		display: flex;
	}
	.name{
		font-size: 26rpx;
		text-align: center;
	}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

这个就是我的实例代码