小程序評價星級

.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,
　　})
},