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

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

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})},})

原文链接：/qq_3571...