index.wxml
<view class="a-comment">
总体评价
<view>
<image
wx:for="{{5}}"
wx:key="index"
data-index="{{index}}"
bindtap="changePopulation"
class="star"
src="{{index < allRate.population ? '../../../images/common/star.png' : '../../../images/common/star_gray.png'}}">
</image>
</view>
<view class="attitude">
{{populationMsg}}
</view>
</view>
index.js
Page({
data:{
population:0, // 评价的个数
populationMsg:'非常满意', // 评价的程度
},
// 评价程度
getMsg(rate){
if (rate == 1) {
return '非常差'
} else if (rate == 2) {
return '差'
} else if (rate == 3) {
return '一般'
} else if (rate == 4) {
return '满意'
} else if (rate == 5) {
return '非常满意'
}
},
// 点击
changePopulation(e){
let rate = e.currentTarget.dataset.index + 1;
let msg = this.getMsg(rate)
this.setData({
population: rate,
populationMsg: msg
})
},
})
index.wxss
.a-comment {
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 24rpx;
margin-bottom: 24rpx;
font-size: 28rpx;
font-weight: 400;
}
.a-comment .star {
width: 50rpx;
height: 48rpx;
margin-right: 10rpx;
}
.a-comment .star:nth-child(1) {
margin-left: 24rpx;
}
.a-comment .star:nth-child(5) {
margin-right: 24rpx;
}
.a-comment .attitude {
color: #999;
}
