uni-app商城（四）分类页面_uni app 分类页面

1.分类页面代码

<template>
	<view>
		<!-- 自定义搜索组件 -->
		<my-search @click="gotoSearch"></my-search>
		<view class="scroll-view-container">
			<!-- 左侧滑动区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: windowHeight+'px'}" :scroll-top="scrollTop">
				<block v-for="(item,i) in cateList" :key="i">
					<view :class="['left-scroll-item',i===active?'active':'']" @click="activeChanged(i)">
						{{item.cateName}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧滑动区域 -->
			<scroll-view scroll-y="true" :style="{height: windowHeight+'px'}">
				<view class="cate-lv2" v-for="(item2,i2) in cataLevel2" :key="i2">
					<!-- 二级分类标题 -->
					<view class="cate-lv2-title">/ {{item2.cateName}} /</view>
					<!-- 二级分类下的三级分类 -->
					<view class="cate-lv3-list">
						<!-- 三级分类的item -->
						<view class="cate-lv3-item" v-for="(item3,i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
							<!-- 三级分类的图片 -->
							<image :src="item3.cataIcon"></image>
							<!--三级分类的文本 -->
							<text>{{item3.cateName}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前设备可用高度
				windowHeight: 0,
				//分类列表
				cateList: [],
				active: 0,
				//二级分类列表
				cataLevel2: [],
				scrollTop:0
			};
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight-50
			this.getCateList()
		},
		methods: {
			getCateList() {
				//获取分类列表
				uni.request({
						url: uni.$baseUrl + '/api/Cate/GetCateList',
					})
					.then((res) => {
						// console.log(res.data.data);
						if (res.data.code != 200) return uni.$showMsg();
						this.cateList = res.data.data;
						//二级分类赋值
						this.cataLevel2 = res.data.data[0].children
					});
			},
			activeChanged(i) {
				this.active = i
				//为二级分类重新赋值
				this.cataLevel2 = this.cateList[i].children
				this.scrollTop=Math.random(0,1)
			},
			//跳转到商品列表页面
			gotoGoodsList(item){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?id='+item
				})
			},
			//跳转到搜索页面
			gotoSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 120px;

			.left-scroll-item {
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 14px;

				&.active {
					background-color: #ffffff;
					position: relative;

					&::before {
						content: ' ';
						display: block;
						width: 3px;
						height: 30px;
						background-color: #c00000;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	.cate-lv2-title {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		padding: 15px 0;
	}

	.cate-lv3-list {
		display: flex;
		flex-wrap: wrap;

		.cate-lv3-item {
			width: 33%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 60px;
				height: 60px;
			}

			text {
				font-size: 12px;
			}
		}
	}
</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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

自定义搜索组件

<template>
	<view @click="searchHandler" class="my-search-container" :style="{'background-color': bgcolor}">
		<view class="my-search-box" :style="{'border-radius': radius+'px'}">
			<uni-icons type="search" size="18"></uni-icons>
			<text class="placeholder">搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		//组件自定义属性
		props:{
			bgcolor:{
				type:String,
				default:'#55aaff'
			},
			radius:{
				type:Number,
				default:18//px
			}
		},
		name: "my-search",
		data() {
			return {

			};
		},
		methods:{
			searchHandler(){
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	.my-search-container {
		height: 50px;
		// background-color: #55aaff;
		display: flex;
		align-items: center;
		padding: 0 10px;

		.my-search-box {
			height: 36px;
			// border-radius: 18px;
			background-color: #ffffff;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.placeholder {
			font-size: 15px;
			margin-left: 5px;
		}
	}
</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

2.效果示例