uni-rate 官方组件不支持半星、滑动、精确小数渲染,h5需手动加hover,小程序伪元素受限;双向绑定value必设,step须参与计算,多端适配需降级处理及防抖。

uni-app 里直接用 uni-rate 会踩哪些坑?
别急着自己写,先看官方组件能不能用——但得知道它“不能做什么”。uni-rate 默认只支持整星、不支持滑动、不支持半星精确渲染(如 4.3 星)、H5 端 hover 效果要手动加、小程序里伪元素限制多导致自定义图标困难。
常见错误现象:allowHalf 设为 true 后星星没半颗显示;@change 拿到的值是整数,但设计稿要求“5 颗星对应 10 分”,结果前端忘了在事件里做乘法换算;微信小程序中点击无反馈,其实是 touchable 默认为 false 且文档没强调。
- 必须在
data中双向绑定value,否则点击无效(:value是单向的) - 需要半星或小数分时,改用自定义组件,别硬套
uni-rate - H5 端想加 hover 缩放,得用
@mouseenter/@mouseleave手动控制 class,不能依赖伪元素
怎么写一个真正支持半星 + 滑动 + 多端一致的评分组件?
核心不是画星星,而是把“用户手指位置”映射成分数。滑动逻辑本质是监听 touchmove 的 X 偏移,除以单颗星宽度,再乘以最大星数,最后用 Math.min/Math.max 截断并四舍五入到步长(如 0.5)。
实操建议:用 view + uni-icons(字体图标)比 image 更轻量、缩放不失真;每颗星用 position: relative 包一层,内部两个图标叠放(空心+实心),通过 clip-path 或 overflow: hidden + transform: translateX 实现半星裁切。
- 滑动时禁用默认滚动:
catchtouchmove,避免 iOS 上误触发页面回弹 - App 端(nvue)不支持
clip-path,得降级为两层图标 +width百分比控制显隐 - 微信小程序里
touchend可能触发两次,用setTimeout+clearTimeout防抖
props 怎么设计才真正高复用?
别只传 value 和 max。业务中常遇到:“这个模块最多打 3 星”“那个接口要求分数 ×2 上传”“运营临时要加个爱心图标”。这些都该由 props 控制,而不是改组件源码。
推荐最小必要集:value(Number)、max(Number)、step(Number,默认 1,设 0.5 就支持半星)、disabled(Boolean)、size(String,如 "28rpx")、activeColor / inactiveColor(String)、icon(String,传 iconfont 字符或 uni-icons 名)。
-
step必须参与计算逻辑,不能只用于 UI 展示——否则滑动时会出现“视觉半星但 value 还是整数”的错觉 - 颜色用 props 传,别写死在 style 里,否则 H5 端暗色模式适配就崩了
- 图标名统一走
iconprop,内部用v-if分支判断是用uni-icons还是自定义 font-class
为什么你写的评分组件在小程序里点不动?
大概率是事件绑定漏了或层级被挡。微信小程序对 touch 事件冒泡和捕获更敏感,且 view 如果没设置 height 或含 flex 布局不当,会导致点击区域实际为 0。
检查三件事:catchtouchstart 是否写成 @touchstart(少了 catch 就会冒泡到父容器);星星容器有没有 pointer-events: none(比如父级加了遮罩层);z-index 是否被其他绝对定位元素盖住。
- 真机调试时打开“调试器 → WXML 面板”,hover 查看元素实际尺寸和事件绑定状态
- 给最外层容器加
style="min-height: 1em;",防止单行文字撑不开高度 - 所有交互事件(
touchstart/touchmove/touchend)必须成对出现,少一个就中断滑动链











