小程序实现五星点评

许多电影和商城都有，购买后评分的功能，下面就实现下：

WXML代码

<view class="comment1-description" style="display:flex;flex-direction:row;">
<view class="comment1-description1">描述相符</view>
<view class="star-pos" style="display:flex;flex-direction:row;">
<view class="stars {{flag>=1? 'on': ''}}" bindtap="changeColor1"></view>
<view class="stars {{flag>=2? 'on': ''}}" bindtap="changeColor2"></view>
<view class="stars {{flag>=3? 'on': ''}}" bindtap="changeColor3"></view>
<view class="stars {{flag>=4? 'on': ''}}" bindtap="changeColor4"></view>
<view class="stars {{flag>=5? 'on': ''}}" bindtap="changeColor5"></view>
</view>
</view>

JS代码

Page({
data:{
flag:0
},
changeColor1:function(){
var that = this;
that.setData( {
flag: 1
});
},
changeColor2:function(){
var that = this;
that.setData( {
flag:2
});
},
changeColor3:function(){
var that = this;
that.setData( {
flag: 3
});
},
changeColor4:function(){
var that = this;
that.setData( {
flag:4
});
},
changeColor5:function(){
var that = this;
that.setData( {
flag: 5
});
},

WCSS代码

/星星的样式/
.stars{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
margin-left: 40rpx;
}
.on{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
/margin-left: 10px;/
}