小程序五星好评功能

完成效果

1.默认效果，页面居中

2.点亮半颗星，评价文字跟着变化

3.点亮三个星

4.点亮超过三个星，评价文字变化
5.五颗星全部点亮

具体实现

1.html

<view style="text-align:center">
/* block 效果：它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。*/
  <block wx:for="{{stars}}" wx:key="index">
    <image class="star-image" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
      <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectXingLeft"></view>
      <view class="item" style="left:33rpx" data-key="{{item+1}}" bindtap="selectXingRight"></view>
    </image>
  </block>
  <view>
    <view wx:if="{{key!=0}}">
      <image src="{{key>3?good_pj:bad_pj}}" style="width:72rpx;height:72rpx;"></image>
    </view>
    <view>{{evaluate}}</view>
  </view>
</view>

2.css

/* 星星图片 */
.star-image {
    width: 66rpx;
    height: 66rpx;
    margin: 10rpx;
    src: "../../../assets/images/iVPGGC_01.jpg";
}
/* 半个星 */
.item {
    position: absolute;
    top: 0rpx;
    width: 33rpx;
    height: 66rpx;
}

3.js

Page({
    data: {
        evaluate: '无',		,//随星星变化的提示内容
        stars: [0, 1, 2, 3, 4],
        normalSrc: '../../../assets/images/iVPGGC_01.jpg',	    //没点亮的星
        selectedSrc: '../../../assets/images/iVPGGC_03.jpg',	//点亮的整颗星
        halfSrc: '../../../assets/images/iVPGGC_02.jpg',			//点亮半颗星
        good_pj: '../../../assets/images/pj_01.jpg',					//好评
        bad_pj: '../../../assets/images/pj_02.jpg',			 			//差评
        key: 0， //评分（具体分值0-5分）
    },
     //点击左边，半个星
    selectXingLeft: function (e) {
        var key = e.currentTarget.dataset.key
        if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
            //只有半颗星的时候,再次点击,变为0颗
            key = 0;
        }
        this.getDiffEvaluate(key)
        this.setData({
            key: key,
        })
    },
    //点击右边,整颗星
    selectXingRight: function (e) {
        var key = e.currentTarget.dataset.key
        this.getDiffEvaluate(key)
        this.setData({
            key: key,
        })
    },
    })
    //根据分值key的不同，提示的内容跟着变化
     getDiffEvaluate(key) {
        let str_key = key + '';
        var temp_tips = '无'
        switch (str_key) {
            case '0':
                {
                    temp_tips = '无'
                    break
                }
            case '0.5':
                {
                    temp_tips = '很差'
                    break
                }
            case '1':
                {
                    temp_tips = '很差'
                    break
                }
            case '1.5':
                {
                    temp_tips = '比较差'
                    break
                }
            case '2':
                {
                    temp_tips = '比较差'
                    break
                }
            case '2.5':
                {
                    temp_tips = '一般般'
                    break
                }
            case '3':
                {
                    temp_tips = '一般般'
                    break
                }
            case '3.5':
                {
                    temp_tips = '还不错'
                    break
                }
            case '4':
                {
                    temp_tips = '还不错'
                    break
                }
            case '4.5':
                {
                    temp_tips = '值得推荐'
                    break
                }
            case '5':
                {
                    temp_tips = '值得推荐'
                    break
                }
            default:
                {
                    temp_tips = '无'
                    break
                }
        }
        this.setData({
            evaluate: temp_tips
        })
    },