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:
点击品牌进行切换:
|
请发表评论