分类：点击切换样式

wxml页面

<view class='cateName {{firstId==index ? "slectedCateName" : ""}}' bindtap='clickName' wx:for="{{cateNameArr}}" wx:for-item="cateName" data-index="{{index}}" id="{{index}}">

{{cateName}}

</view>

 

 

wxss页面

.cateName {

  width: 100%;

  height: 87rpx;

  font-size: 24rpx;

  color: #656565;

  justify-content: center;

  align-items: center;

display: flex;

}

.slectedCateName {

width: 184rpx;

background:#fff;

color:#ff6d00;

border-left:8rpx solid #ff6d00;

}

 

 

js页面　

// 分类名称

slectedCateName: false, // 选中的样式

firstId: 0, // 默认第一个选中

cateNameArr: [

'汽车配件',

'车载电器',

'汽车装饰',

'安全驾驶',

'美容清洗',

'汽车改装',

'油品化学式'

],

 

// 点击分类名称，变换底色和字体颜色

clickName: function (res) {

// console.log(res)

var index = res.currentTarget.id

this.setData({

firstId: index

})

},