直接修改uni-app的radio/checkbox样式不生效，因其在小程序端编译为不可访问内部结构的原生组件，h5端受浏览器限制；正确做法是用color属性控制选中色，或彻底手写view+icon模拟并手动管理状态、无障碍及动画。
uni-app里Checkbox样式被限制怎么办
原生checkbox在uni-app中无法直接用CSS修改内部勾选图标，尤其在App端和小程序端表现不一致——iOS下checkbox默认样式不可覆盖，微信小程序里checkbox-group的checkbox子项也受限于基础库版本。真正能控制样式的，是「用普通view模拟」+「手动管理状态」。
用view+icon实现可动画的自定义Checkbox
核心思路：用view包裹uni-icons或字体图标（如\uE102），通过v-model或:checked绑定数据，再用transition触发缩放/颜色/描边动画。关键点不是“怎么画个方框”，而是“怎么让点击区域、状态同步、无障碍支持都不掉链子”：
- 必须给外层
view加cursor: pointer（H5）和hover-class（小程序），否则视觉反馈缺失 - 图标元素需设置
display: inline-flex并居中，避免文字基线偏移导致抖动 - 动画推荐用
transform: scale(0)→scale(1)，比opacity更利于性能，且能配合transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1)做出弹性效果 - 别忘了加
aria-checked和role="checkbox"，否则读屏软件无法识别状态
<view class="custom-checkbox" :class="{ 'checked': isChecked }" role="checkbox" :aria-checked="isChecked"><uni-icons type="checkbox-filled" size="20" v-if="isChecked"></uni-icons></view>
小程序真机上动画卡顿怎么解决
微信小程序基础库低于2.25.0时，transition在view上对transform的支持不稳定，常表现为首次点击无动画或多次点击后失效。绕过方式很实在：
- 改用
animationAPI：用uni.createAnimation()显式控制，兼容性更好 - 避免在
checked类里写transform: scale(1)，改为用animation类名触发，防止Vue响应式更新触发重绘冲突 - App端（尤其是iOS）慎用
will-change: transform，可能引发白屏，只在H5环境开启 - 动画时长严格控制在
200ms以内，超过300ms用户感知为延迟
多选场景下如何批量管理状态又不卡顿
当列表项超过50条，用v-for渲染自定义checkbox，每个都绑@click会触发大量响应式依赖收集，滚动时明显掉帧。真实项目里得这样压：
- 用
Object.freeze冻结选项数据源（如const options = Object.freeze([{id:1,label:'A'},...])），避免Vue代理开销 - 状态存成
Set而非数组：const checkedIds = new Set([1,3])，checkedIds.has(id)比arr.includes(id)快一个数量级 - 点击事件里不用
this.checkedIds.add(id)直接改，而是用this.$nextTick批量合并更新，减少视图刷新次数 - 长列表务必启用
virtual-list（如uni-app-vue-virtual-list），否则DOM节点过多直接拖慢整个页面
复杂点不在“怎么画个动效”，而在“怎么让动画不抢主线程、状态不丢、屏幕阅读器能跟上、低端机也能跑顺”。这些细节漏掉任何一环，上线后都会变成用户投诉里的“点不动”“反应慢”“读不出来”。
