微信小程序五星点评

效果图：

主要思路

小程序是把样式写好动态改变样式，而不能操作dom，所以还是老方法。

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="starsM  {{flag2>=1? '': 'hideStar'}}"  bindtap="changeColor11"></view>
            <view class="starsM  {{flag2>=2? '': 'hideStar'}}"  bindtap="changeColor12"></view>
            <view class="starsM  {{flag2>=3? '': 'hideStar'}}"  bindtap="changeColor13"></view>
            <view class="starsM  {{flag2>=4? '': 'hideStar'}}"  bindtap="changeColor14"></view>
            <view class="starsM  {{flag2>=5? '': 'hideStar'}}"  bindtap="changeColor15"></view>
        </view>
    </view>

---

JS代码：

Page({
  data:{
     flag2:5
  },
  changeColor11:function(){
        var that = this;
        that.setData( {
            flag2: 1
        });
    },
  changeColor12:function(){
        var that = this;
        that.setData( {
            flag2:2
        });
    },
  changeColor13:function(){
        var that = this;
        that.setData( {
            flag2: 3
        });
    },
  changeColor14:function(){
        var that = this;
        that.setData( {
            flag2:4
        });
    },
  changeColor15:function(){
        var that = this;
        that.setData( {
            flag2: 5
        });
    }
})

---

WXSS代码：

.comment1-description{
    margin-top: 35rpx;
}
.comment1-description1{
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #333333;
    margin-left: 30rpx;
}
.star-pos {
    position: absolute;
    right: 0px;
    margin-right: 40rpx;
}
.comment1-description .star-pos .hideStar{
    z-index: 2;
    background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
    width: 83rpx;
    height: 43rpx;
    background-size: 43rpx 43rpx;
    background-position: center center;
    background-repeat: no-repeat;
}

.starsM{
    z-index: 1;
    width: 83rpx;
    height: 43rpx;
    background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
    background-size: 43rpx 43rpx;
    background-position: center center;
    background-repeat: no-repeat;
}