小程序中点击给当前添加active的选中样式

在小程序中给一个列表加一个选中样式，效果如下：

如图中当前选中： 综合

代码如下：

wxml

data-item 是用来传当前位置的，必须要写

 <view class="condition-nav" wx:if="{{!historyShow}}" >
      <view 
      wx:for="{{conditionList}}" 
      wx:for-item="info"  
      data-item="{{info.id}}" 
      wx:key="item" 
      bindtap="SyntheSize" 
      class='item {{activeItem == info.id ? "active" : ""}}'>{{info.name}}</view>
  </view>

wxss

选中样式可自定义

.condition-nav .active {
  font-weight: bold;
  font-size: 16px;
}

js

看好数据格式

 Page({
 	data: {
 	   activeItem:0,
 	   conditionList:[
 	   {name:'综合',id:0},
 	   {name:'销量',id:1},
 	   {name:'高额券',id:2},
 	   {name:'价格',id:3}]
    },
    SyntheSize: function (e) {
	    let id = e.currentTarget.dataset.item;
	    that.setData({
	      activeItem: id
	    })
	}
 })