商品五星评价

wxml

<view class="bottom">
	<view class="item" wx:for="{{typ}}" wx:for-item="row" wx:for-index="idx" wx:key="txt"> 
		{{row.txt}}
        <view class="star-list">
            <image class="star" wx:for="{{stars}}" wx:key="*this" bindtap="change" 
            data-idx="{{idx}}" data-index="{{index}}"  
            src="{{row.flag>=index? '/static/star-red.png': '/static/star-empty.png'}}"></image>

            <text style='margin-left: 30rpx;'>{{stars[row.flag]}}</text>
        </view>
	</view>
</view>

wxss

.bottom{
	display: flex;
	flex-direction: column;
	font-weight: 550;
}

.bottom .item {
	height: 90rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.star-list {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.star{
	width: 40rpx;
	height: 40rpx;
	margin-left: 30rpx;
}

js

data: {
	typ: [
		{ txt:"品质", flag:4 }, 
		{ txt:"服务", flag:4 },
		{ txt:"快递", flag:4 },
	],
	stars: [
		"非常不满意", 
		"不满意",
		"一般",
		"满意",
		"非常满意",
	],
},
    
// 5星评价
change: function (e) {
	var typ_idx = e.currentTarget.dataset.idx;         // 类型索引
	var star_idx = e.currentTarget.dataset.index;      // 选中星的索引
	var typFlag = 'typ[' + typ_idx + '].flag';
	this.setData({
		[typFlag]: star_idx,
	});
},

效果