先看一下效果圖：

如上圖所示，這里我們要添加三個五星點評。

我們這里之講解一下，“描述相符”的點評

---

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 {{flag0>=1? 'on': ''}}" bindtap="changeColor1"></view><view class="stars {{flag0>=2? 'on': ''}}" bindtap="changeColor2"></view><view class="stars {{flag0>=3? 'on': ''}}" bindtap="changeColor3"></view><view class="stars {{flag0>=4? 'on': ''}}" bindtap="changeColor4"></view><view class="stars {{flag0>=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;*/ }

總結

以上是生活随笔為你收集整理的小程序实现五星点评的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。