小程序评价星级

.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 { 25%;}
.evaluateLv .rightCont { 75%;display: flex;align-items: center;}
.evaluateLv .rightCont .list-item { 15%;}
.evaluateLv image { 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,
　　})
},