標(biāo)簽數(shù)據(jù)在data中定義， 因?yàn)檫€要點(diǎn)擊高亮， 所以同時(shí)給個(gè)狀態(tài)值

data: {
    selectall: [{
      title: "視頻制作",
      isSelect: false
    }, {
      title: "文創(chuàng)開發(fā)",
      isSelect: false
    }, {
      title: "影視后期",
      isSelect: false
    }, {
      title: "活動策劃",
      isSelect: false
    }, {
      title: "互聯(lián)網(wǎng)營銷",
      isSelect: false
    }, {
      title: "其他",
      isSelect: false
    }]
  },

頁面循環(huán)渲染出來
點(diǎn)擊事件bindtap='select',
綁定class: class="{{item.isSelect?'active':'select'}}", 點(diǎn)擊的時(shí)候改變類名
自定義dataset :data-index="{{index}}"

<view>標(biāo)簽</view>
  <view class='tagArea'>
    <block wx:for="{{selectall}}" wx:key="{{this}}">
      <text class="{{item.isSelect?'active':'select'}}" bindtap='select' data-index="{{index}}">{{item.title}}</text>
    </block>
  </view>

.tagArea{
  margin-top: 40rpx;
}

.select{
  display: inline-block;
  line-height: 50rpx;
  padding: 14rpx 26rpx;
  margin: 10rpx 10rpx;
  font-size: 24rpx;
  background: #e6e6e6;
  color: #999;
  border: none;
  border-radius: 16rpx;
}
.active{
  display: inline-block;
  background: #f44232;
  color: #fff;
  box-shadow: 0 5rpx 15rpx #f44232;
  font-size: 24rpx;
  padding: 14rpx 26rpx;
  margin: 10rpx 10rpx;
  border-radius: 16rpx;
  line-height: 50rpx;
}

樣式效果

已經(jīng)點(diǎn)擊的和沒有點(diǎn)擊的效果.png

JS部份

select(event) {
    let index = event.target.dataset.index
    this.data.selectall[index].isSelect = !this.data.selectall[index].isSelect;
    this.setData({
      selectall: this.data.selectall
    })
  },

到這兒, 高亮的就已經(jīng)寫好了. 怎么取值呢? 下面還有一個(gè)保存按鈕. 給保存按鈕一個(gè)點(diǎn)擊事件:
1.定義一個(gè)空數(shù)據(jù)
2.遍歷上邊的data里的selectall數(shù)組, 傳兩個(gè)參數(shù), v是所有標(biāo)簽的狀態(tài)(比如isSelect:false或isSelect:true), i是下標(biāo).

3. 判斷如果狀態(tài)是true , 就push到數(shù)組里

submit(){
    let all = [];
    this.data.selectall.forEach((v,i)=>{
      console.log(v + i)
      if(v.isSelect){
        all.push(v)
      }
    })
    console.log(all);
  }

看打印結(jié)果

高亮的標(biāo)簽狀態(tài)為true.png