[微信小程序]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;}