[微信小程序]js动态改变数组对象列表中的样式

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

这里我用微信小程序商城开发中选择商品规格选择做示例:

先把效果图让大家看看,  默认情况下是这样的

当点击了规格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;
}