一、概述

本篇文章我们需要接着上篇文章的样式文件进行编写

.left menu{
flex:2;
.menu_item{height: 80rpx;display: flex;
justify-content: center;align-items: center;font-size: 30rpx;}
.activef
font-weight: bolder;
color: var(--themeColor);
border-left: 8rpx solid currentColor;3

如上将我们从后端的数据返回给左右两侧界面分别显示自己的内容。

设置左侧边栏属性 文字大小 据中 选中变色 默认选中第一个
active属性是默认选中的样式

接下来我们对右侧数据的详细信息列表进行初始化

.right_content{
flex:5;
.productType{
padding: 30rpx 20rpx 30rpx 20rpx;- productType_title{
font-weight: bolder;}
-product_list{navigator{
display: flex;margin: 1Brpx;imagef
flex: 1;B
.right{flex: 3;
:product name{

如上我们发现 实现一个页面 只需要先写 js然后wxml最后 wxss配置样式即可。
 二、实现左侧点击分类右侧显示不同商品类型的列表

选中左侧的菜单时我们可以选择设置一个变量 储存点击的不同序列号。

data: {
baseUrl:'',
currentIndex:0,// 当前选中左侧菜单的索引leftMenuList:[],//左侧菜单数据
rightContext:[]//右侧商品数据

将 序列变量更改为自定义 点击则需要更改

然后我们到wxml文件中 

<view class="cates_container"><!--左侧菜单开始-->
<scroll-view scroll-y class="left_menu">
view class="menu_item findex==currentIndex ? 'active' :""H}"wx : for="{{leftMenuList}}"
wx : key="*this"
data-index="i{ index}}"
bindtap=""handleMenuItemChange"fitem}}
</view>
</ scroll-view>
<!--左侧菜单结束-->

当前的wxml我们不需要有什么特殊的变动 只需要加入一个新的事件 就是点击跳转的事件即可

加入点击切换事件 bindtap
在 js中编写 bindtap事件函数