有問題可以掃碼加我微信，有償解決問題。承接小程式開發。

微信小程式開發交流qq群   173683895  、 526474645 ；

正文：

這裡我用微信小程式商城開發中選擇商品規格選擇做示例:

先把效果圖讓大家看看,  預設情況下是這樣的

當點選了規格11以後:    該商品規格的顏色變成紅色,並且顯示該規格商品的圖片和價格

當點選了規格22以後: 該商品規格的顏色變成紅色,並且顯示該規格商品的圖片和價格,同時把其它規格的商品規格顏色恢復成了黑色

下面來給大家看看示例的程式碼:

    <view class='page_row' style='height:80rpx'>
      <view class='guige'>規格:</view>
      <view class='serven' wx:for="{{guige}}" wx:key="index">
        <text bindtap='arr_guige' class='{{item.is_say_yes?"on":""}}' data-index='{{index}}'>{{item.arr_guige}}</text>
      </view>
    </view>
    <view wx:if="{{arr_remark}}">{{arr_remark}}</view>
    <image wx:if="{{guige_img}}" bind:touchstart="touchstart" bind:touchend="touchend" class='guige_img' src='{{guige_img_src}}'></image>
    <text wx:if="{{arr_price}}">{{arr_price}} 元</text>
 

js

  arr_guige:function(e){
    var that = this;
    guige_index = e.currentTarget.dataset.index;
    var guige_img_src = this.data.img + this.data.guige[guige_index].arr_img;
    var arr_price = this.data.guige[guige_index].arr_price;
    for (var i = 0; i < this.data.guige.length; i++) {
      that.setData({
        ['guige[' + i + '].is_say_yes']: false,
      })
      if (i == guige_index) {
        that.setData({
          ['guige[' + i + '].is_say_yes']: true,
        })
       
      }
    }  
    this.setData({
      guige_img:true,
      guige_img_src: guige_img_src,
      arr_price: arr_price
    })
  },
 

css

.guige {
  width: 150rpx;
}
.guige_img{
  width: 200rpx;
  height: 200rpx
}
.serven {
  display: flex;
  flex-wrap: wrap;
}

.serven text {
  font-size: 32rpx;
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  background: #f2f2f2;
  padding: 0 15rpx 0 15rpx;
  margin: 15rpx;
}
.page_row{
  display: flex;
  flex-direction: row;
  align-items: center;
}