小程序展示评分结果合评分功能

星星评分展示1

根据评分展示整颗行星或者半颗星星

星星评分展示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  }