uni-app怎么做评价打分 uni-app五星评分组件制作方法【实战】

秋静吖_5128

秋静吖_5128

2026-04-12

728人浏览

原创

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

uni-app怎么做评价打分 uni-app五星评分组件制作方法【实战】

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 实现半星裁切。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 滑动时禁用默认滚动: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 端暗色模式适配就崩了
  • 图标名统一走 icon prop,内部用 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)必须成对出现,少一个就中断滑动链
真实项目里最难的从来不是画五颗星星,而是让同一套逻辑在 App、微信小程序、H5 上都“点哪算哪”。尤其是滑动评分时,手指抬起瞬间的坐标采样时机,各端 Webview 内核差异会让它差 2–3 像素——这点偏差,就决定了用户是打了 4.5 星还是 5 星。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2583

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5583

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6590

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6238

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

883

5

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

100

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

60

10

OpenJDK怎么部署Java应用
OpenJDK怎么部署Java应用

Java项目开发完成后,怎样部署到目标环境并正常运行?本专题介绍OpenJDK应用部署流程,涵盖运行环境准备、版本兼容检查、应用打包、启动参数配置和日志查看,帮助你理清部署前后的操作顺序,减少环境差异造成的运行问题。

2026.10.16

40

10

Revel框架模板渲染与表单验证
Revel框架模板渲染与表单验证

本专题围绕Revel框架视图层开发,介绍模板语法、变量输出、布局复用、表单提交、参数绑定与验证规则,帮助开发者完成安全规范的页面交互。

2026.10.16

40

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习