.wxml
<view class="evaluateLv"> <view class="leftCont">星级评价：</view> <view class="rightCont flex flex-ac"> <block wx:for="{{lvList}}" wx:key="item"> <view class="list-item"> <image class="block" src="{{item}}" bindtap="evaluateLv" data-index="{{index}}"></image> </view> </block> </view> </view>
.wxss
.evaluateLv{display: flex;align-items: center;}
.evaluateLv .leftCont {width: 25%;}
.evaluateLv .rightCont {width: 75%;display: flex;align-items: center;}
.evaluateLv .rightCont .list-item {width: 15%;}
.evaluateLv image {width: 48rpx;height: 48rpx;}
.js
data: { lvList:[ ‘/images/btn_star_default.png‘, ‘/images/btn_star_default.png‘, ‘/images/btn_star_default.png‘, ‘/images/btn_star_default.png‘, ‘/images/btn_star_default.png‘, ],//星星个数 lvListActive1: ‘/images/btn_star_default.png‘,//选中的 lvListActive2:‘/images/btn_star_select.png‘,//未选中的 }, //星级评价 evaluateLv(e){ console.log(e); var that = this; var idx = e.currentTarget.dataset.index; var lvList = that.data.lvList; lvList.forEach((item,index) => { if (index <= idx){ lvList[index] = that.data.lvListActive2; } else{ lvList[index] = that.data.lvListActive1; } }) that.setData({ lvList: lvList, }) },