微信小程序星级评分和展示

正文：用户点击第几颗星星就显示为几星评分

wxml文件代码

<view class='assess_sec_img'>
    <block wx:for="{{empty_star}}" wx:key="index">
        <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../img/star_img.png' class='assess_star_img'></image>
    </block>
    <block wx:for="{{full_star}}" wx:key="index">
        <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../img/star_imgs.png' class='assess_star_img'></image>
    </block>
</view>

wxss文件代码

.assess_sec .assess_sec_star .assess_sec_img{
    width: 530rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
    float: left;
}

.assess_sec .assess_sec_star .assess_sec_img .assess_star_img{
    width: 47rpx;
    height: 46rpx;
    float: left;
    margin: 0 10rpx; 
}

js文件代码

Page({

    /**
     * 页面的初始数据
     */
    data: {
        empty_star: 0,         //未选择星星
        full_star: 5           //已选择星星
    },

    // 用户给评分
      in_xin: function(e) {
        var that = this;
        console.log(e);
        var in_xin = e.currentTarget.dataset.in;
        var empty_star;
        if (in_xin === 'use_sc2') {
            empty_star = Number(e.currentTarget.id) - 1;
            console.log(empty_star);
        } else {
            empty_star = Number(e.currentTarget.id) + that.data.empty_star;
            console.log(empty_star);
        }
        this.setData({
            empty_star: empty_star,
            full_star: 5 - empty_star
        })
    },

})

原文链接：https://blog.csdn.net/qq_3571...