小程序制作五星点评（默认五星）

https://blog.csdn.net/xiaoshan0711/article/details/54571823

在小程序的开发过程中，我们会遇到一种情况，就是在制作五星点评的时候，默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。

在这里我们先看一下效果图：

我们在订单页面的时候，当点击“晒单”按钮的时候我们跳转到评价的页面。

<!--星星评价--> <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>

.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/[email protected]"); background-size: 43rpx 43rpx; background-position: center center; background-repeat: no-repeat; }