先看效果图
wxml如下:
<view class='itembox'>
<view wx:for="{{imgs}}" wx:key="{{item.id}}" bindtap='select' data-index="{{item.id}}">
<image class="star" src="{{item.id>starId?src2:src1}}"></image>
</view>
<view class='scorePin'>{{starId}}.00</view>
</view>
wxss如下:
.itembox {
display: flex;
align-items: center;
}
.scorePin{
font-size:26rpx;
font-weight: 600;
}
.star {
width: 50rpx;
height: 50rpx;
margin: 0 5rpx;
vertical-align: middle;
}
js如下:
data: {
imgs: [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}],
starId: 5,
src1:'../../../images/xing1.webp',
src2: '../../../images/xing2.jpg'
},
select(e) {
console.log(e)
this.data.starId = e.currentTarget.dataset.index;
this.setData({
starId: this.data.starId
})
}
这样就实现了 点亮星星评论的