微信小程序实现菜单及子品牌联动

1、大分类下默认选中的品牌:
首先，定义一个class样式，用来标识被选中的品牌:

然后，给标签加上class：

发现可以改变文本颜色：

紧接着，在分类页面中定义一个brandActive状态，用来表示默认被选中品牌的下标：

回过头来，给品牌标签的class名brandActive加一个判断， 如果当前的js状态brandActive 恒等于当前html标签的下标 则该元素会绑定class：

页面默认效果：

2、大分类下默认选中品牌的商品列表：
首先，在classify.js中定义一个brandSonArr状态，用来存放分类下的商品列表：

其次，定义一个方法，用来请求接口并给brandSonArr请求回来的数据：

然后把brandSonArr传给商品列表brandSon组件：

brandSon组件接收：

将商品列表渲染出来：

默认显示为索引值为0的品牌列表：

3、切换大分类，联动切换品牌及商品列表:
给大类绑定一个change事件, 监听active(选中的大类下标)的改变:

默认选中大类下标：

绑定的onChange事件，当改变选中大类时:
A.将active的下标改为当前选中大类的下标，
B.通过getGoodsBrand(“大类名字”)获取商品列表.

Before:

After:

点击品牌进行切换: