【开发】uniapp实现产品分类页动态加载_uniapp如何实现商品分类-优快云博客

本文链接：https://blog.youkuaiyun.com/xjflion/article/details/138366979

本文描述了如何在uniapp应用中，通过调用后台提供的webservice接口获取产品分类信息，实现在左侧列表点击后动态加载右侧的产品列表，无需刷新界面，优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现思路：

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 = pro