在小程序的開發(fā)過程中，我們會遇到一種情況，就是在制作五星點評的時候，默認(rèn)五顆星星都是要亮的。這里我們就要分享一下自己做默認(rèn)五星的心得。

在這里我們先看一下效果圖：

我們在訂單頁面的時候，當(dāng)點擊“曬單”按鈕的時候我們跳轉(zhuǎn)到評價的頁面。

---

（圖一：訂單列表）

（圖二：評價）

在這里我們只看一下“描述相符的五星”

---

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; }

我們在這里的原理呢？接下來分析：

WXML代碼里面，我們給每一顆星星通過bindtap綁定一個事件changeColor11，changeColor12…等等五個事件。過個點擊事件來改變flag2的默認(rèn)值。

JS代碼里面,我們默認(rèn)flag2的值是5。然后里面可以調(diào)用WXML里面的事件。

WXSS中，我們通過starsM讓所有星星都變亮，通過hideStar讓所有的星星都變灰色。

總結(jié)

以上是生活随笔為你收集整理的小程序制作五星点评（默认五星）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。