小程序 - 五星评价系统（状态支持满星点亮 半星点亮 不点亮）

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

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

我们在订单页面的时候，当点击“晒单”按钮的时候我们跳转到评价的页面，比较简单直接上代码。

WXML代码：

<view style="width: 100%; height: 200rpx;"></view>
 
<!-- 星星打分 -->
<view class="scoreView">
    <!-- 五星点评区域 -->
    <view class="stu-score-view">
        <block wx:for='{{stars_text}}' wx:key='textItem' wx:for-index='textIndex'>
            <!-- 每一项点评，数据多少项遍历多少排 -->
            <view class='stu-score-view1'>
                <!-- 产品需求是能让用户自己输入五星点评类型，所以在此使用input -->
                <!-- 对应数据 ['描述相符', '物流服务', '购买体验', '沟通情况'] -->
                <input class="stu-score-text" type="text" placeholder="{{item}}" disabled />
                <!-- 遍历星icon 因为支持半星所以要循环遍历十次 对应数据 [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]-->
                <block wx:for='{{stars_num}}' wx:key='starsItem' wx:for-item="starsItem" wx:for-index='starsIndex'>
                    <!-- 外层用盒子包裹 内层是图片，因为支持半星，所以盒子宽度是图片的一半，需要显示左边还是右边通过改变class实现 -->
                    <view class="{{starsItem%1 == 0 ? 'score_box2' : 'score_box1'}}" catchtap="starsClick" data-score="{{starsItem}}" data-index="{{textIndex}}">
                        <!-- 图片 -->
                        <image class="{{starsItem%1 == 0 ? 'score_stars2' : 'score_stars1'}}" src="{{stars_score[textIndex] >= starsItem ?stars_select : stars_unselect}}"></image>
                    </view>
                </block>
            </view>
        </block>
    </view>
    <!-- 总星区域 -->
    <view class="scoreView1">
        <text class="scoreText">{{sunScore}}</text>
        <text class="scoreText1">总星</text>
    </view>
</view>

JS代码：

Page({
 
    /**
     * 页面的初始数据
     */
    data: {
        stars_text: ['描述相符', '物流服务', '购买体验', '沟通情况'], // 每项评分的标题
        stars_score: [3.5, 3, 4.5, 5], // 每项点亮的星星数
        stars_num: [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5], // 每个星星代表的数字
        stars_select: '../../../image/stars_select.png', // 星星图标(灰)
        stars_unselect: '../../../image/stars_unselect.png', // 星星图标(亮)
        sunScore: 16, // 总星
    },
 
    //星星点击
    starsClick: function (e) {
        let that = this,
            score = e.currentTarget.dataset.score,
            index = e.currentTarget.dataset.index;
        that.data.stars_score[index] = score;
        let sunScore = 0;
        for (let i = 0; i < that.data.stars_score.length; i++) {
            sunScore += that.data.stars_score[i];
        }
        that.setData({
            stars_score: that.data.stars_score,
            sunScore: sunScore
        })
    },
})

WCSS代码

/* 评分 */
.scoreView {
    width: 95%;
    margin-left: 46rpx;
    display: flex;
    flex: 1;
    align-items: center;
    margin-bottom: 14rpx;
}
 
.stu-score-view {
    width: 540rpx;
}
 
.stu-score-view1 {
    height: 60rpx;
    line-height: 50rpx;
    align-items: center;
    display: flex;
}
 
.stu-score-text {
    width: 184rpx;
    font-size: 30rpx;
    border: 1px solid #ccc;
    border-radius: 8rpx;
    display: inline-block;
    padding: 0 30rpx;
    margin-right: 12rpx;
    box-sizing: border-box;
}
 
.score_box1 {
    width: 24rpx;
    height: 48rpx;
    overflow: hidden;
    padding-left: 8rpx;
}
 
.score_box2 {
    width: 24rpx;
    height: 48rpx;
    overflow: hidden;
    padding-right: 8rpx;
}
 
.score_stars1 {
    width: 48rpx;
    height: 48rpx;
}
 
.score_stars2 {
    width: 48rpx;
    height: 48rpx;
    margin-left: -24rpx;
}
 
.scoreView1 {
    width: 100rpx;
}
 
.scoreText {
    font-size: 34rpx;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 40rpx;
    flex: 1;
    display: flex;
    margin-left: 4rpx;
    justify-content: center;
}
 
.scoreText1 {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 37rpx;
    display: flex;
    flex: 1;
    justify-content: center;
}

注释已经写的很详细了，不啰嗦，图片就留给大家咯：