【开发】uniapp实现产品分类页动态加载_uniapp如何实现商品分类

客户需求：客户产品品类较高，需要左侧通过文字的形式显示所有分类信息，点击分类不需要重新加载当前界面，直接更新加载产品列表页。

实现思路：

1､后台需要一个获取产品分类webservice接口、一个获取产品信息接口（都是通过产品分类找查）。

2､uniapp前台分两块，一块左侧列表，一块产口信息。

3､用户选择产品分类后，前台动态加载更新右侧产品信息。

显示效果：

获取产品分类代码如下：

//获取当前产品分类
				let requestUrl=this.websiteUrl +"/WebService.asmx/GetProductAllTypeList";
				//当前用户已登录，获取详情
				if(this.hasLogin){
					requestUrl=this.websiteUrl +"/LoginWebService.asmx/GetProductAllTypeList?customerId="+this.userInfo.UserId;
				}
				uni.request({
					url: requestUrl,
					data: {},
					method: 'GET',
					header: {
						'Content-Type': 'text/xml; charset=utf-8',
					},
					success: (res) => {
						const doc = new DOMParser().parseFromString(res.data, 'text/xml');
						var proList = JSON.parse(doc.getElementsByTagName("string")[0].childNodes[0].nodeValue);
						list = proList || [];
						this.currentId = list[0].PRODUCT_TYPE_ID;
						list.forEach(item => {
							if (item.PARENT_TYPE_ID == 1) {
								this.flist.push(item); //一级分类
							}
						});
						list.forEach(item => {
							var cf = false;
							this.flist.forEach(ff => {
								if (ff.PRODUCT_TYPE_ID == item.PRODUCT_TYPE_ID) {
									cf = true;
								}
							})
							if (!cf) {
								this.slist.push(item); //二级分类
							}
						});
						list.forEach(item => {
							var cf = false;
							this.flist.forEach(ff => {
								if (ff.PRODUCT_TYPE_ID == item.PRODUCT_TYPE_ID) {
									cf = true;
								}
							});
							this.tlist.forEach(tt => {
								if (tt.PRODUCT_TYPE_ID == item.PRODUCT_TYPE_ID) {
									cf = true;
								}
							});
							if (!cf) {
								this.tlist.push(item); //三级分类
							}
						});
						this.flist.forEach(ff => {
							if (ff.PRODUCT_TYPE_ID != list[0].PRODUCT_TYPE_ID) {
								this.vlist[ff.PRODUCT_TYPE_ID] = false;
							} else {
								this.vlist[ff.PRODUCT_TYPE_ID] = true;
							}
						
						});
					},
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

页面代码如下：

<scroll-view scroll-y class="left-aside">
			<view v-for="item in flist" :key="item.PRODUCT_TYPE_ID" class="f-item b-b" :class="{active: item.PRODUCT_TYPE_ID === currentId}"
			 @click="tabtap(item)">
				{{item.TYPE_NAME}}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<view v-for="ii in flist" :key="ii.PRODUCT_TYPE_ID" class="s-list" :id="'main-'+ii.id" v-show="vlist[ii.PRODUCT_TYPE_ID]">
				<!--<text class="s-item">{{ii.TYPE_NAME}}</text>-->
				<view class="i-item" @click="navToList(ii)">
					<image :src="siteUrl + '/UpLoadFile/'+ii.TYPE_BIG_IMG"></image>
				</view>

				<view class="t-list">
					<view @click="navToList(titem)" v-if="titem.PARENT_TYPE_ID === ii.PRODUCT_TYPE_ID"
					 class="t-item" v-for="titem in slist" :key="titem.PRODUCT_TYPE_ID">
						<image :src="siteUrl + '/UpLoadFile/'+titem.TYPE_MIN_IMG"></image>
						<text>{{titem.TYPE_NAME}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22