實現五星評價功能，效果圖如下：

.wxml檔案：

<view class="star-title">1、品質效果</view>

<view class="star-pos">

    <image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}"

                src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />

    <view style='margin-left: 30rpx;'>{{startext[0]}}</view>

</view>

<view class="star-title">2、服務質量</view>

 <view class="star-pos">

    <image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}"

                    src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />

    <view style='margin-left: 30rpx;'>{{startext[1]}}</view>

</view>

<view class="star-title">3、綜合管理</view>

<view class="star-pos">

    <image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}"

                src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />

    <view style='margin-left: 30rpx;'>{{startext[2]}}</view>

</view>
 

.js 檔案：

page: ({

    data: {        

            flag:[0, 0, 0],

            startext: ['', '', ''],

            stardata: [1, 2, 3, 4, 5],

        },

        // 五星評價事件

        changeColor: function (e) {

            var index = e.currentTarget.dataset.index;

            var num = e.currentTarget.dataset.no;

            var a = 'flag[' + index + ']';

            var b = 'startext[' + index + ']';

            var that = this;

            if(num == 1) {

                that.setData({

                    [a]: 1,

                    [b]: '非常不滿意'

                });

            } else if (num == 2){

                that.setData({

                    [a]: 2,

                    [b]: '不滿意'

                });

            } else if (num == 3) {

                that.setData({

                    [a]: 3,

                    [b]: '一般'

                });

            } else if (num == 4) {

                that.setData({

                    [a]: 4,

                    [b]: '滿意'

                });

            } else if (num == 5) {

                that.setData({

                    [a]: 5,

                    [b]: '非常滿意'

                });

           }

    },

})



.wxss檔案：

.star-pos {

    margin: 10rpx;

    display: flex;

    flex-direction: row;

}

.stars{

    width: 40rpx;

    height: 40rpx;

    margin-left: 30rpx;

}