微信小程序五星級評分效果

<view>
    <view class="zan-font-16 my-ib" bindtap="myStarChoose">
        <block wx:for="{{starMap}}">
            <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
            <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
        </block>
    </view>
    <!--★-->
    <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
</view>

這裏的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的樣式。
這裏的my-ib只是將設置display爲inline-block。

Page({
    data: {
        star: 0,
        starMap: [
            '很是差',
            '差',
            '通常',
            '好',
            '很是好',
        ],
    },
    myStarChoose(e) {
        let star = parseInt(e.target.dataset.star) || 0;
        this.setData({
            star: star,
        });
    }
});

效果如圖：