评价星级功能实现

基于微信小程序实现

• 功能实现：半星，全星，灰星
  全星标准：（如9分 除二等 4.5 全星就是 4颗）
  半星标准：当小数点大于等于5时 显示半星其余显示灰
  灰星标准：属于的显示灰星

星星模板

wxml

<!--stars.wxml-->
<template name="stars">
  <view class='star-container'>
    <view class='stars'>
      <block wx:for="{{arr}}" wx:for-index='xid' wx:key='xid'>
      <image src='{{item}}'></image>
     </block>
    </view>
    <text class='starsfont'>{{average}}</text>
  </view>
</template>

wxss

/* 星星样式 */
.star-container {
  display: flex;
  flex-direction: row;
}
.stars {
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 30rpx;
  margin-top: 10rpx;
}
.stars image {
  padding-left: 5rpx;
  width: 17rpx;
  height: 17rpx;
}
.starsfont {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}

js

const db = wx.cloud.database()
function star(data) {
  let index = data //获取数据长度
  for (var i = 0; i < index.length; i++) {
    let arr1 = []
    let average = index[i].rating.average / 2
    average = average.toFixed(1);
    let int = Math.floor(average)
    for (var j = 1; j <= int; j++) {
      arr1.push("/images/icon/star-full.png")
    }
    if (average * 10 % 10 > 5) {
      arr1.push("/images/icon/star-half.png")
    }
    let num = 5 - arr1.length
    for (let i = 0; i < num; i++) {
      arr1.push("/images/icon/star-empty.png")
    }
    index[i].rating.arr = arr1
  }
}

封装获取数据库方法

function data(database, index) {
  return db.collection(database).doc(index).get().then(function (res) {
    return Promise.resolve(res.data)
  })
}

module.exports = {  //导出方法
  star: star,
  data: data
}

使用星星组件
in_theaters 数据库表， 811e3512 _id

//
const utils = require('../../utils/utils.js')//引入utils 方法
   utils.data('in_theaters','811e3512').then(res => {
      utils.star(res.subjects)
      this.setData({movieItem:res})
    })