当前位置：首页 > news >正文

鸿蒙OSUniApp 制作个性化的评分星级组件#三方框架 #Uniapp

news 2025/6/1 7:48:41

UniApp 制作个性化的评分星级组件

在移动应用开发中，评分星级组件（Rating Star）是用户交互和反馈的重要工具，广泛应用于电商、外卖、内容社区等场景。一个美观、易用、可定制的评分组件，不仅能提升用户体验，还能增强产品的互动性。随着 HarmonyOS（鸿蒙）生态的不断壮大，如何用 UniApp 实现一个兼容鸿蒙的个性化评分星级组件，成为许多开发者关注的话题。本文将结合实际项目经验，详细讲解如何用 UniApp 制作一个灵活、可扩展、适配鸿蒙的评分星级组件。

为什么要自定义评分星级组件？

虽然市面上有一些现成的评分组件，但在实际项目中，往往会遇到如下需求：

支持半星、整星、可自定义星星数量；
支持自定义星星图标、颜色、大小、动画效果；
兼容多端，尤其是 HarmonyOS 设备的适配和体验优化；
支持只读、可编辑、带提示文字等多种模式。

自定义组件不仅能满足个性化需求，还能提升整体产品体验。

组件设计思路

设计一个评分星级组件，需要考虑以下几个方面：

星星数量与分值：支持自定义星星数量、当前分值、最小步长（如半星）。
交互体验：支持点击、滑动选择分数，动画反馈。
样式定制：支持自定义图标、颜色、大小、间距等。
鸿蒙适配：在鸿蒙端保证手势、动画、图标渲染等能力正常。
易用性与扩展性：props 设计合理，便于业务集成和后续扩展。

组件实现

我们以一个通用的 RatingStar 组件为例，支持自定义星星数量、分值、颜色、大小、只读等。

1. 组件结构

在 components/rating-star/rating-star.vue 下新建组件：

<template><view class="rating-star" :style="{ fontSize: size }"><viewv-for="(star, idx) in starCount":key="idx"class="star-item"@touchstart="onTouch(idx, $event)"@click="onClick(idx, $event)"><text:class="getStarClass(idx)":style="{ color: getStarColor(idx) }">{{ getStarIcon(idx) }}</text></view><text v-if="showText" class="rating-text">{{ displayText }}</text></view>
</template><script>
export default {name: 'RatingStar',props: {value: {type: Number,default: 0},starCount: {type: Number,default: 5},allowHalf: {type: Boolean,default: false},size: {type: String,default: '48rpx'},color: {type: String,default: '#ffd21e'},voidColor: {type: String,default: '#e5e5e5'},icon: {type: String,default: '★'},voidIcon: {type: String,default: '☆'},readonly: {type: Boolean,default: false},showText: {type: Boolean,default: false},texts: {type: Array,default: () => ['很差', '较差', '一般', '满意', '非常满意']}},data() {return {innerValue: this.value};},watch: {value(val) {this.innerValue = val;}},computed: {displayText() {if (!this.showText) return '';let idx = Math.ceil(this.innerValue) - 1;return this.texts[idx] || '';}},methods: {getStarClass(idx) {if (this.allowHalf && this.innerValue - idx > 0 && this.innerValue - idx < 1) {return 'star-half';}return this.innerValue > idx ? 'star-full' : 'star-void';},getStarColor(idx) {return this.innerValue > idx ? this.color : this.voidColor;},getStarIcon(idx) {if (this.allowHalf && this.innerValue - idx > 0 && this.innerValue - idx < 1) {return this.icon; // 可扩展为半星图标}return this.innerValue > idx ? this.icon : this.voidIcon;},onTouch(idx, e) {if (this.readonly) return;if (this.allowHalf) {const touch = e.touches[0];const rect = e.currentTarget.getBoundingClientRect();const isHalf = touch.clientX - rect.left < rect.width / 2;this.innerValue = isHalf ? idx + 0.5 : idx + 1;} else {this.innerValue = idx + 1;}this.$emit('input', this.innerValue);this.$emit('change', this.innerValue);},onClick(idx, e) {if (this.readonly) return;if (!this.allowHalf) {this.innerValue = idx + 1;this.$emit('input', this.innerValue);this.$emit('change', this.innerValue);}}}
};
</script><style scoped>
.rating-star {display: flex;align-items: center;
}
.star-item {margin-right: 8rpx;user-select: none;
}
.star-full {color: #ffd21e;transition: color 0.2s;
}
.star-void {color: #e5e5e5;transition: color 0.2s;
}
.star-half {color: #ffd21e;position: relative;
}
.rating-text {margin-left: 16rpx;font-size: 28rpx;color: #888;
}
</style>

2. 组件使用示例

在页面中引用并使用 RatingStar 组件，实现评分交互：

<template><view class="demo-rating"><rating-star v-model="score" :starCount="5" :allowHalf="true" :showText="true" /><text class="score-text">当前评分：{{ score }}</text><rating-star :value="4" :starCount="7" color="#ff4d4f" voidColor="#eee" :readonly="true" :showText="true" :texts="['极差','很差','一般','良好','满意','优秀','满分']" /></view>
</template><script>
import RatingStar from '@/components/rating-star/rating-star.vue';export default {components: { RatingStar },data() {return {score: 3.5};}
};
</script><style scoped>
.demo-rating {padding: 40rpx;
}
.score-text {margin-top: 24rpx;font-size: 32rpx;color: #333;
}
</style>