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

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

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

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

---

（图一：订单列表）

（图二：评价）

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

---

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>
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

---

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        });    }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---

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/[e-mail]");    background-size: 43rpx 43rpx;    background-position: center center;    background-repeat: no-repeat;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

我们在这里的原理呢？接下来分析：

WXML代码里面，我们给每一颗星星通过bindtap绑定一个事件changeColor11，changeColor12…..等等五个事件。过个点击事件来改变flag2的默认值。

JS代码里面,我们默认flag2的值是5。然后里面可以调用WXML里面的事件。

WXSS中，我们通过starsM让所有星星都变亮，通过hideStar让所有的星星都变灰色。