方案一：
wxml部分：
<!-- 点亮星星 -->
<view class='stars'>
<view class='contents'>
<view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='scores'></view>
</view>
</view>
wxss部分：
.stars{
100%;
display: flex;
height: 40rpx;
box-sizing: border-box;
position: relative;
}
.contents{
100%;
display: flex;
box-sizing: border-box;
position: relative;
}
.contents:last-of-type{
height: 40rpx;
}
.contents:last-of-type view{
42rpx;
height: 42rpx;
margin-right: 15rpx;
background-size: 100% 100%;
}
JS部分：
// 点亮星星的基础数据
stars: [
{
flag: 1,
bgImg: "http://wximg.youtasc.com/star.png",
bgfImg: "http://wximg.youtasc.com/f_star.png"
},
{
flag: 1,
bgImg: "http://wximg.youtasc.com/star.png",
bgfImg: "http://wximg.youtasc.com/f_star.png"
},
{
flag: 1,
bgImg: "http://wximg.youtasc.com/star.png",
bgfImg: "http://wximg.youtasc.com/f_star.png"
},
{
flag: 1,
bgImg: "http://wximg.youtasc.com/star.png",
bgfImg: "http://wximg.youtasc.com/f_star.png"
},
{
flag: 1,
bgImg: "http://wximg.youtasc.com/star.png",
bgfImg: "http://wximg.youtasc.com/f_star.png"
}
],
// 点亮星星的事件部分
scores: function (e) {
var that = this;
for (var i = 0; i < that.data.stars.length; i++) {
var allItem = 'stars[' + i + '].flag';
that.setData({
[allItem]: 1
})
}
var index = e.currentTarget.dataset.index;
for (var i = 0; i <= index; i++) {
var item = 'stars[' + i + '].flag';
that.setData({
[item]: 2
})
}
}
方案二：（缺陷：目前我还没想到如何实现动态的效果）
wxml部分：
<!-- 点亮星星 -->
<view class='shop-star'>
<view class='star-after'>★★★★★</view>
<view class='star-before' >★★★★★</view>
</view>
wxss部分：
.shop-star{
font-size: 50rpx;
display: flex;
position: absolute;
}
.star-after{
font-size: 50rpx;
color: #e2e2e2;
}
.star-before{
position: absolute;
color: #f19e38;
90%;
overflow: hidden;
}
方案三：
wxml部分：
<block wx:for="{{sumelist}}" wx:key="">
<image class='comment-icon' src='{{item.url}}' />
</block>
<!-- 评论星级、空心 -->
<block wx:for="{{sumeList}}" wx:key="">
<image class='comment-icon' src='{{item.Url}}' />
</block>
wxss部分:
.comment-icon{
30rpx;
height: 30rpx;
display: inline-block;
}
js部分：
sumelist:[
{
id:0,
url:'img/star.png',
},
{
id:1,
url: 'img/star.png',
},
{
id: 2,
url: 'img/star.png',
},
{
id: 3,
url: 'img/star.png',
},
{
id:4,
url: 'img/star.png',
},
],
sumeList:[
{
id:0,
Url:'img/starg.png',
},
{
id:1,
Url: 'img/starg.png',
},
{
id: 2,
Url: 'img/starg.png',
},
{
id: 3,
Url: 'img/starg.png',
},
{
id:4,
Url: 'img/starg.png',
},
],