正文：用戶點擊第幾顆星星就顯示為幾星評分

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...

總結

以上是生活随笔為你收集整理的微信小程序星级评分和展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。