真正能落地的修改方式只有两个：一是使用CSS变量（仅H5/微信小程序2.27+支持），二是手写轻量级rate组件；uView的u-rate最省事，否则30行Vue代码即可实现。
uni-app 的 uni-rate 组件默认样式太丑，怎么改？
直接改不了——uni-rate 内部用的是 uni-icons 和固定 class，不支持通过 class 或 scoped CSS 深度穿透覆盖图标颜色/大小。你看到的“自定义样式”基本是假的，除非重写整个组件逻辑。
真正能落地的方式只有两个：要么用 CSS 变量（仅限 H5/小程序基础库较新版本），要么手写一个轻量级 rate 组件。App 端连 CSS 变量都不稳定，别赌。
-
--uni-rate-icon-color、--uni-rate-icon-active-color、--uni-rate-icon-size在 H5 和微信小程序 2.27+ 可用，但支付宝小程序不认 - 想改图标？
icon属性只接受字符串"star"或"heart"，不能传自定义 iconfont 或 svg - scoped 样式里写
.uni-rate__icon { color: red }无效，因为组件内部用了shadow-root（小程序）或动态 class（App）
手写 rate 组件：用 uView 的 u-rate 还是纯 Vue 实现？
如果你项目已引入 uView，直接用 u-rate 是最省事的——它支持 icon 传入任意 unicode 字符、支持 active-color/inactive-color、支持 size，且 H5/App/小程序三端表现一致。
没引入 UI 库？别写 200 行封装，用 30 行搞定：
<template>
<view class="custom-rate">
<text
v-for="(item, i) in count"
:key="i"
class="rate-icon"
:class="{ 'active': i < value }"
@tap="setValue(i + 1)"
>★</text>
</view>
</template>
<script>
export default {
props: ['value', 'count'],
methods: {
setValue(val) {
this.$emit('input', val)
this.$emit('change', val)
}
}
}
</script>
<style>
.rate-icon { font-size: 24px; color: #e0e0e0; }
.rate-icon.active { color: #faa916; }
</style>- 用
★字符比加载 iconfont 更快，无兼容问题 - 不要用
v-model直接绑定，uni-app的v-model在自定义组件中需显式处理input事件 - 如果需要半星，把
v-for改成循环 2×count，再用background-clip: text做遮罩（但 App 端不支持，慎用）
微信小程序里 uni-rate 点击失效或响应错位？
这是 uni-app 编译层对 touchstart 事件的处理 bug，尤其在 scroll-view 或 swiper 内嵌时高发。现象是：点第 3 颗星，实际触发第 1 颗的回调；或者点击无反应。
- 临时解法：给
uni-rate外层加catchtouchstart阻止冒泡，同时确保父容器没有overflow: hidden或transform - 根本解法：换手写组件，用
@tap而非依赖uni-rate内部的touch事件链 - 别信 “加
user-select: none就好” —— 这在 iOS 微信里反而让点击区域变小
评分后想显示文字描述（如“非常满意”），怎么联动？
别在 rate 组件里硬塞文案逻辑。把描述抽成独立计算属性，和 value 强绑定：
computed: {
rateDesc() {
const desc = ['不满意', '一般', '满意', '很满意', '非常满意']
return desc[this.value - 1] || ''
}
}这样既避免在模板里写一堆 v-if，又方便后续国际化（只需改数组）。
- 如果服务端返回的是 0–100 分制，先转成 1–5 星：用
Math.round(score / 20)，别用parseInt截断 - 用户拖动评分条（如
uni-slider）时也触发同一套描述逻辑，保持体验一致
复杂点在于半星交互和无障碍支持（比如屏幕阅读器读不出当前星级），这些手写组件几乎没法兼顾，真有合规需求，得上原生小程序的 aria-valuenow 手动透传。
