關於小程序點擊view動態添加樣式

基本邏輯： 

1.給每個view自定義dataIndex屬性，從0開始

2.自定義一個名為selected的class，作為被選中后的樣式

3.在wx.js中給viewId屬性賦為0，用於默認顯示。

4.給每個view添加一個點擊事件select，在點擊某個view時   將dataIndex變成這個view的自定義index

5.在view中添加一個三木運算符用於控制選中樣式  {{dataIndex == 0 ? 'selected':''}}

附圖：

wxml

<view class="ICONBOX {{viewId == 0 ? 'selected':''}} "  bindtap="select" data-index= '0'>
      <view class="iconfont icon-haoping ic" ></view>好評
    </view>
    <view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'> 
      <view class="iconfont icon-zhongping ic"></view>中評
    </view>
    <view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
      <view class="iconfont icon-bottom-comment ic"></view>差評
    </view>

wxss

 /* 表情盒子 */
 .ICONBOX{
   border: 1px solid red;
   display: flex;
   justify-content: space-around;
   /* flex-direction:  */
   align-items: center;
   color: #999;
   font-size: 28rpx;
 }
 .ic{
   margin-right: 5rpx;
 }
 .selected{
   color: #f63
 }

wxjs

 data: {
    
   viewId : 0
  },
  

 select:function(e){
    this.setData({
      viewId: e.currentTarget.dataset.index
    })
  },

由於viewId初始值是0，所以會默認第一個切換了樣式。

這樣就完成了該事件：

 

 里面還有幾個不足之處，時間倉促，暫且就這樣寫了。

以上。