uniapp 绘制五星评分精确到半星

server/2025/1/15 9:54:21/

uniapp 绘制五星评分精确到半星

对比上一篇博客这个很简单
上组件

<template><div :class="[imgType=='other'?'image-box':'image-box1']"><img :class="[imgType=='other'?'image':'image1']" v-for="(el,i) in value" :key="i" :src="el" alt=""></div>
</template><script>export default {props: {type: {type: Number,default: 1 // 总分5， 总分 100},score: {type: Number,default: 0 // 得分50，得分 100},imgType: {type: String,default: 'other' // wonder：奇观， other：其他}},data() {return {wonder: ['https://eshopfile.zhiyousx.com/173284619428810213.png','https://eshopfile.zhiyousx.com/173284619428405733.png','https://eshopfile.zhiyousx.com/173284619428491512.png'], //奇观other: ["https://eshopfile.zhiyousx.com/173284605868930990.png","https://eshopfile.zhiyousx.com/173284605869004457.png","https://eshopfile.zhiyousx.com/173284605868490597.png",], //其他};},computed: {// 转换得分value() {// 得分为0if (!this.score) {let newArr = []for (var i = 0; i < 5; i++) {newArr.push(this[this.imgType][2])}return newArr}// 得分不为0let value = this.type == 2 ? (this.score / 20).toFixed(1) : this.score;let arr = []// 空星 向后添加let empty = 5 - Math.ceil(value);for (let i = 1; i < 6; i++) {if (value >= i) {arr.push(this[this.imgType][0]); // 全星} else {if (value < i && Math.ceil(value) == i) {let num = this.getNumber(this.score) - 1console.log(num)arr.push(this[this.imgType][num]); // 半星} else {arr.push(this[this.imgType][2]); // 空星}}}return arr},},methods: {getNumber(input) {input = this.type == 2 ? (input / 20).toFixed(1) : input;const decimalPart = (input * 10 - Math.floor(input) * 10) / 10; // 获取小数部分if (decimalPart >= 0.1 && decimalPart <= 0.2) {return 3;} else if (decimalPart >= 0.3 && decimalPart <= 0.7) {return 2;} else if (decimalPart >= 0.8 && decimalPart <= 0.9) {return 1;}}}};
</script>
<style lang="scss" scoped>.image {width: 24rpx;height: 24rpx;margin-right: 2rpx;}.image1 {width: 28rpx;height: 28rpx;// margin-right: 2rpx;}.image-box {height: 30rpx;width: 130rpx;text-align: center;}.image-box1 {height: 30rpx;width: 140rpx;text-align: center;}
</style>

组件使用

<template><view class="external-box"><starRate :score="100" /></view>
</template><script>import starRate from "../components/starRateImg.vue";export default {components: {starRate,},};
</script><style lang="scss" scoped></style>