這篇文章主要介紹了微信小程式點選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，所以會預設第一個切換了樣式。

這樣就完成了該事件：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。