<view class='page_row' 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;
}
查看更多关于微信小程序js动态改变数组对象列表中的样式的详细内容...