一、功能概述

进入到分类界面 左侧是商品的分类信息，点击可以跳转到不同的商品展示界面。

实现方法现在js文件中定义变量

data:{
leftMenuList:[],//左侧菜单数据
rightContext:[]//右侧商品数据},
//所有商品类别数据Cates:[],

定义三个列表 分别存储左右两侧的数据
倒入之前我们使用的requerstUtil工具类
 

import regeneratorRuntime from '../../lib/runtime/runtime ';

获取商品的分类数据 也就是左侧边栏的数据

async getCates(O {
const result = await requestUtil(
{url: '/bigType/findCategories',method:"GET"
});
this.Cates=result.message;
let leftMenuList=this.Cates.map(v=>v.name)let rightContext=this.Cates[0].smallTypeList;this.setDatai
leftMenuList,rightContext耶
工

完成了变量定义 接下来我们在wxml文件页面进行显示

<!--左侧菜单开始-->
<scroll-view scroll-y class="left_menu"><view class="menu_item"
wx:for="{{leftMenuList}}"wx: key="*this"
>{fitem}}
</view>
</ scroll-view>
<!--左侧菜单结束-->
<!--右侧商品数据开始-->
<scroll-view scroll-y class="right_content"><view class="productType"
wx:for="firightContext}}”wx: for-item="productType"wx:key="id"
<view class="productType_title">iproductType.name}B
T
</view>
</view>
</scroll-view>
<!--右侧商品数据结束--></view>

如上我们已经可以显示出商品的信息

接下来我们需要对less文件也就是样式文件进行修改

less文件配置页面标签的样式
左右两侧分别设置·类选择器，左侧样式和右侧样式不同
分别设置各自的属性即可。

接下来的样式文件设置 以及成功跳转请看下篇文章