html
<view class="comment1-description">
<view>本次评价</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>
wxss控制星星颜色
.stars{
background:url("http://yunshu.zhangtongdongli.com/uploads/1.png");
width: 50rpx;
height: 50rpx;
background-size: 50rpx 50rpx;
margin-left: 30rpx;
transition: 600ms;
}
.on{
background:url("http://yunshu.zhangtongdongli.com/uploads/2.png");
width: 50rpx;
height: 50rpx;
background-size: 50rpx 50rpx;
transition: 1s;
transform: scale(1,1)
}
js(flag在data里面默认为0)
changeColor1: function () {
var that = this;
that.setData({
flag: 1
});
console.log(that.data.flag)
},
changeColor2: function () {
var that = this;
that.setData({
flag: 2
});
console.log(that.data.flag)
},
changeColor3: function () {
var that = this;
that.setData({
flag: 3
});
console.log(that.data.flag)
},
changeColor4: function () {
var that = this;
that.setData({
flag: 4
});
console.log(that.data.flag)
},
changeColor5: function () {
var that = this;
that.setData({
flag: 5
});
console.log(that.data.flag)
},