本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)展示評(píng)分結(jié)果的具體代碼，供大家參考，具體內(nèi)容如下

星星評(píng)分展示1

根據(jù)評(píng)分展示整顆行星或者半顆星星

星星評(píng)分展示2

根據(jù)評(píng)分按照小數(shù)點(diǎn)展示整顆行星或者部分星星

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

//星星評(píng)分var praiseNums=res.data.result.praiseNum;//獲取數(shù)據(jù)評(píng)分var praisestars=(praiseNums/5)*100+'%';// console.log(praisestars);that.setData({ praisestars: praisestars})

星星評(píng)分

單擊星星，整顆星星

wxml

<!--pages/test/test.wxml--> <view>   <view>一:顯示后臺(tái)給的評(píng)分</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;'>二:顯示用戶選擇的評(píng)分</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>