uni-rate 可直接用于简单场景:整星点击、只读展示、无需半星精度;但不支持滑动评分,allowHalf 为 true 时视觉显示半星但 @change 仍返回整数,H5 需手动加 hover,小程序伪元素受限易错位。

uni-rate 能不能直接用?先看它支持什么
能用,但只适合简单场景:整星点击、只读展示、不关心半星精度。它不支持滑动评分,allowHalf设为 true 后视觉上可显示半颗,但 @change 拿到的仍是整数(比如点 4.5 星,事件里还是 4 或 5),因为内部没做小数计算逻辑。H5 端 hover 效果要自己加 @mouseenter/@mouseleave 控制 class,小程序里伪元素受限,自定义图标容易错位。
为什么 v-model 绑定后点不动?常见绑定陷阱
最常踩的坑是用了单向绑定或类型不对。以下三点必须同时满足:
-
:value是单向的,必须配合@change手动更新 data,否则点击无效 - 用
v-model时,绑定的变量必须是Number类型,null或undefined会触发 prop 校验失败;推荐初始化为null,而不是0(0 分是合法值) - 小程序端
touchable默认为false,必须显式写touchable="true",否则无响应
要半星 + 滑动 + 多端一致,得自己写 touch 逻辑
核心不是画星星,而是把手指位置映射成分数。关键在 touchmove 阶段的像素换算:
- 记录
touchstart的clientX,作为起点 -
touchmove中用当前clientX - startX除以单颗星宽度(如30),再乘以最大星数,得到原始分值 - 用
Math.round(value * 2) / 2四舍五入到 0.5 倍数,再用Math.min/Math.max截断范围 - App 端(nvue)不支持
clip-path,得用两层图标 +width: XX%控制实心图显隐;H5 和小程序可用overflow: hidden+transform: translateX
u-rate 或 vant-rate 怎么选?兼容性优先级
别碰 van-rate——它依赖微信原生组件机制,uni-app 编译时会丢生命周期,真机必挂。推荐 u-rate(uView 提供),它对多端做了封装:
-
v-model支持Number类型(如4.5),allow-half和disabled开箱即用 - 注意
size单位是px不是rpx,设36更接近美团 App 视觉大小 - 只读场景下,
void-color设为#e0e0e0可对齐主流设计规范 - 表单校验别用
if (!this.score),0 分会被当成 false;应判this.score === null || this.score === undefined
真正难的不是实现滑动或半星,而是各端对 touch 事件的响应延迟、iOS 点透、微信基础库版本导致的 e.detail 结构差异——这些细节不打日志、不真机测,上线后才暴露。










