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>
- 该组件 判断规则 0-0.2 为 0星 0.3-0.7 半星 0.8-1 1星
对比上一个博客 该组件更简单 更直观 无适配问题 但精确度不够 可以增加图片 提高精度。
`
)