本文實例為大家分享了微信小程序實現展示評分結果的具體代碼，供大家參考，具體內容如下
星星評分展示1
根據評分展示整顆行星或者半顆星星
星星評分展示2
根據評分按照小數點展示整顆行星或者部分星星
wxml
<view class="conmmentbox"> <view class="starbox"> <view class="stars2" style="width: 130rpx"> <view> <image src="../../image/token_img/lp_ct2.png"></image> <image src="../../image/token_img/lp_ct2.png"></image> <image src="../../image/token_img/lp_ct2.png"></image> <image src="../../image/token_img/lp_ct2.png"></image> <image src="../../image/token_img/lp_ct2.png"></image> </view> </view> <view class="stars" style="width: {{praisestars}};"> <view> <image src="../../image/token_img/lp_dj1.png"></image> <image src="../../image/token_img/lp_dj1.png"></image> <image src="../../image/token_img/lp_dj1.png"></image> <image src="../../image/token_img/lp_dj1.png"></image> <image src="../../image/token_img/lp_dj1.png"></image> </view> </view> </view> {{ praiseNum }}分</view>wxss
.conmmentbox{ display: inline-block; font-size: 22rpx; color: #F74754;}.conmmentstars{ width: 26rpx; height: 26rpx;}.doortimes{ color: #F74754; margin-left: 10rpx;}.starbox{ width: 130rpx; height: 30rpx; position: relative; display: inline-block; overflow: hidden; float: left;}.stars{ width: 130rpx; height: 30rpx; position: relative; top: 0; left: 0; overflow: hidden;}.stars2{ height: 30rpx; width: 130rpx; overflow: hidden; position: absolute; top: 0; left: 0; overflow: hidden;}.stars image,.stars2 image{ width: 26rpx; height: 26rpx; float: left; white-space:nowrap;}.stars view,.stars2 view{ width: 130rpx; position: absolute;}js
//星星評分var praiseNums=res.data.result.praiseNum;//獲取數據評分var praisestars=(praiseNums/5)*100+'%';// console.log(praisestars);that.setData({ praisestars: praisestars})星星評分
單擊星星，整顆星星
wxml
<!--pages/test/test.wxml--> <view> <view>一:顯示后臺給的評分</view> <block wx:for="{{one_1}}"> <image src='../../images/use_sc2.png'></image> </block> <block wx:for="{{two_1}}"> <image src='../../images/use_sc.png'></image> </block> </view> <view>這里num給的是幾分就顯示幾顆星星</view> <view style='margin-top:60px;'>二:顯示用戶選擇的評分</view> <block wx:for="{{one_2}}" wx:key="index"> <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../images/use_sc2.png'></image> </block> <block wx:for="{{two_2}}" wx:key="index"> <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../images/use_sc.png'></image> </block> <view>{{one_2}}星</view>js
// pages/test/test.js Page({ /** * 統一滿分為5星 */ data: { num: 4,//后端給的分數,顯示相應的星星 one_1: '', two_1: '', one_2: 0, two_2: 5 }, onLoad: function (options) { //情況一:展示后臺給的評分 this.setData({ one_1: this.data.num, two_1: 5 - this.data.num }) }, //情況二:用戶給評分 in_xin:function(e){ var in_xin = e.currentTarget.dataset.in; var one_2; if (in_xin === 'use_sc2'){ one_2 = Number(e.currentTarget.id); } else { one_2 = Number(e.currentTarget.id) + this.data.one_2; } this.setData({ one_2: one_2, two_2: 5 - one_2 }) } })wxss
/* pages/test/test.wxss */ image{ height: 60rpx; width: 60rpx; display: inline-block }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
