10.3.1 产品列表-左侧分类程序开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

最新推荐文章于 2024-10-15 17:24:33 发布

黄菊华老师

最新推荐文章于 2024-10-15 17:24:33 发布

阅读量835

点赞数 1

分类专栏： uni-app 文章标签： uni-app教程

本文链接：https://blog.csdn.net/u013818205/article/details/109667322

版权

uni-app 专栏收录该内容

122 篇文章 21 订阅

订阅专栏

10.3 产品列表和详情

我们本小节讲解产品分类页面和产品详情，效果如图10-7和图10-8
在这里插入图片描述

10.3.1 产品列表-左侧分类

本小节讲解如何获取产品左侧的分类数据，然后显示在页面。

开发分析

第1步：查看和测试接口的内容。
第2步：在程序的data代码块初始化变量fenlei，用于存放产品分类数据。
第3步：在程序的onLoad代码块中调用接口，获取数据，赋值给变量fenlei。
第4步：改造布局代码，将获取的分类数组信息循环显示出来。

第1步：查看和测试接口

地址

http://qiyephp.yaoyiwangluo.com/h5/wx_api_CpFenlei.php

返回值类型：

对象数组，每一个数组的元素是一个对象，每个对象代表一个分类信息。

返回值

[      
{
	"fenlei_id" : 265,
	"fenlei_mc" : "产品分类1"
}, 
{
	"fenlei_id" : 266,
	"fenlei_mc" : "产品分类2"
}, 
{
	"fenlei_id" : 267,
	"fenlei_mc" : "产品分类3"
}, 
{
	"fenlei_id" : 268,
	"fenlei_mc" : "产品分类4"
}, 
{
	"fenlei_id" : 269,
	"fenlei_mc" : "产品分类5"
}      
]

第2,3步：获取数据

<script>
export default {
	data() {
	return {
		fenlei:[],  //初始化为空，数组，存放分类数据	
	}
	},
	onLoad() {
	//页面初始化：获取分类数据
	 uni.request({
		//url:this.$WebURL.WebUrl.dizhi + "/m/wx_api_fenlei.asp",
		//http://qiyephp.yaoyiwangluo.com/h5/wx_api_CpFenlei.php
		url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpFenlei.php",
		//success:function(res)这个模式this不能获取data里的数据，请使用箭头函数
		success:(res) =>{
			this.fenlei = res.data; //获取的产品分类数据 赋值给变量fenlei
		}
	 })		
	},
	mounted:function(){

	},
	methods: {
				
	}
}
</script>

第4步：显示数据

<!-- 左侧 : 分类列表 -->
<view class='zuo' :style="'height:'+gaodu+'px'" >
   <!--通过接口获取产品分类数据，然后循环显示-->
   <!--变量fenlei，存放的是通过接口获取的产品分类数据（数组）-->
   <!--:class 通过三元运算费来判断当前分类是否选中状态-->
   <!--@click 点击当前分类的时候调用自定义方法Xuanze改变当前选中的分类id-->
   <block v-for="fl in fenlei" :key="fl.fenlei_id" >
	<view class="type-nav"  :class="fl.fenlei_id==curFenlei ? 'xuanzhong' : '' " 
		 @click="Xuanze(fl.fenlei_id)"> <!--fenlei_id：当前分类id-->
	  {{fl.fenlei_mc}} <!--fenlei_mc：当前分类名称-->
	</view>
   </block>		  
</view>