自学内容网 自学内容网

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

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

  1. 对比上一篇博客 这个很简单
  2. 上组件
<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() {
// 得分为0
if (!this.score) {
let newArr = []
for (var i = 0; i < 5; i++) {
newArr.push(this[this.imgType][2])
}
return newArr
}
// 得分不为0
let 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) - 1
console.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>
  1. 组件使用
<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>
  1. 该组件 判断规则 0-0.2 为 0星 0.3-0.7 半星 0.8-1 1星

对比上一个博客 该组件更简单 更直观 无适配问题 但精确度不够 可以增加图片 提高精度。

`


原文地址:https://blog.csdn.net/weixin_45563734/article/details/145131511

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!