10.3 产品列表和详情
我们本小节讲解产品分类页面和产品详情，效果如图10-7和图10-8
10.3.1 产品列表-左侧分类
本小节讲解如何获取产品左侧的分类数据，然后显示在页面。开发分析
第1步：查看和测试接口的内容。
第2步：在程序的data代码块初始化变量fenlei，用于存放产品分类数据。
第3步：在程序的onLoad代码块中调用接口，获取数据，赋值给变量fenlei。
第4步：改造布局代码，将获取的分类数组信息循环显示出来。
第1步：查看和测试接口
地址
返回值类型：
对象数组，每一个数组的元素是一个对象，每个对象代表一个分类信息。返回值
[
{
"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>
