直接改uni-radio样式会失效，因各平台样式穿透规则不同：微信小程序需用/deep/或:deep()并指定层级选择器，h5可直接覆盖，app-nvue建议自定义组件；change事件必须绑定在radio-group上；小程序transform动画慎用，推荐opacity+scale过渡；跨端一致推荐封装自定义radio组件。
直接改uni-radio样式会失效？先确认平台和选择器层级
微信小程序、H5、App（vue/nvue）对uni-radio的样式穿透支持不一致。H5 可以用普通 CSS 覆盖，但小程序里必须用带平台前缀的选择器，否则!important也无效。
- 微信小程序：用
.uni-radio .uni-radio-input，且需在page.scss或组件style scoped中加/deep/或::v-deep（Vue 2）；Vue 3 +uni-app@3.9+推荐用:deep(.uni-radio-input) - H5：直接写
uni-radio.uni-radio-input即可，!important通常能生效 - App-nvue：不支持 CSS 伪类和部分动画，建议改用自定义组件方案
- 关键点：选中态的边框色和背景色要分别覆盖
border-color和background-color，漏掉任一都会回退到平台默认色
change事件绑错位置导致不触发？只认radio-group
这是新手最常踩的坑：change事件必须绑定在<radio-group></radio-group>上，而不是单个<radio></radio>。因为互斥逻辑由radio-group统一管理，单个radio没有change事件接口。
- 正确写法：
<radio-group><radio value="a"></radio><radio value="b"></radio></radio-group> - 错误写法：
<radio value="a"></radio>—— 这个事件永远不会执行 -
onRadioChange回调参数是{ detail: { value } }，注意取值路径，别直接解构value - 如果用
v-model绑定radio-group，则无需手动监听change，但动画和样式仍需自己控制
用transition做选中动画，但小程序里transform不生效？
小程序对 CSS 动画支持有限，transform: scale()在部分旧版基础库中会失效，更稳妥的方式是用opacity + width/height过渡，或改用animation关键帧。
- 推荐写法（兼容性好）：
.uni-radio-input-checked { opacity: 1; transform: scale(1); transition: opacity 0.2s, transform 0.2s; } - 小程序慎用
will-change或backface-visibility，可能引发渲染异常 - 如果要做“波纹”或“滑动条”效果，不要依赖
uni-radio原生结构，应封装为独立组件（如wo-radio-hopping），用view+animationAPI 实现 - H5 可放心用
@keyframes，但记得加animation-fill-mode: forwards让动画停在结束帧
想彻底摆脱平台限制？用自定义组件替代radio标签
当颜色、图标、动画、布局都要求严格一致时，硬改uni-radio不如重写一个。核心是模拟单选行为：点击切换状态 + 同组互斥 + 透传value。
- 用
view包裹text或image作为视觉层，用v-if/v-else控制选中/未选中图标（如icon-check-circle和icon-uncheck） - 维护一个
selectedValue响应式变量，点击时赋值，并通过$emit('change', value)模拟原生事件 - 配合
radio-group的v-model或@change同步状态，避免父子不同步 - 第三方插件如
wo-radio-hopping已封装好v-model:options和@on-change，适合快速上线，但体积增加约 8–12KB
disabled临时锁定 + 微调transition-delay。
