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

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

我們?cè)谟唵雾?yè)面的時(shí)候，當(dāng)點(diǎn)擊“曬單”按鈕的時(shí)候我們跳轉(zhuǎn)到評(píng)價(jià)的頁(yè)面。

---

（圖一：訂單列表）

（圖二：評(píng)價(jià)）

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

---

WXML代碼：

<!--星星評(píng)價(jià)--><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; }

我們?cè)谶@里的原理呢？接下來(lái)分析：

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

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

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

總結(jié)

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

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