uni-app中click事件无默认视觉反馈，需手动实现；优先用hover-class+hover-stop-propagation，App端建议用touchstart/touchend绑定class控制激活态。
uni-app 中 click 事件本身不触发视觉反馈，得自己加
uni-app 默认不会像原生 App 那样给可点击元素加“水波纹”或“灰度压暗”效果。你绑了 @click，点下去毫无反应，用户根本不知道点没点上——这不是 bug，是设计如此。要高亮，必须手动控制样式状态。
常见错误现象：
– 直接在 style 里写 :active，但在小程序平台（尤其是微信）完全无效；
– 用 hover-class 但没配 hover-stop-propagation，导致父容器也响应；
– 在 H5 上生效了，一打包到 App 或小程序就失效。
- 优先用
hover-class+hover-stay-time控制，它语义清晰、性能好，且 uni-app 编译器能自动适配各端 - 若需更精细控制（比如不同颜色、动画、或需要 JS 动态判断），改用
data-active这类绑定 class 的方式，配合touchstart/touchend手动模拟 - 注意：App 端（iOS）对
hover-class支持较弱，建议 fallback 到 JS 方案
hover-class 在小程序和 H5 的行为差异
这个属性看着简单，但各端渲染逻辑不同：H5 是 CSS :active 机制，小程序是 WebView 层模拟的“伪 active”，App 端则依赖原生渲染引擎支持程度。
- H5 端：支持
hover-class，但要求元素有cursor: pointer才会触发（否则要加bindtap激活） - 微信小程序：必须设置
hover-class="xxx"且该 class 不能含!important，否则忽略；同时建议加hover-stop-propagation="true"防止冒泡干扰 - App 端（Android/iOS）：iOS 基本不响应
hover-class，Android 部分机型支持不稳定，别依赖它做核心反馈
示例写法：<view class="btn" hover-class="btn-active" hover-stop-propagation="true">提交</view>
对应样式：.btn-active { opacity: 0.6; }
用 touchstart / touchend 手动控制激活态（跨端最稳）
当 hover-class 不可靠时，这是唯一真正可控的方式。原理很简单：按下去设 isPressed = true，松开设 false，再靠 class 绑定切换样式。
- 必须监听
touchstart和touchend（不是mousedown），因为小程序和 App 不发 mouse 事件 - 记得加
touchcancel处理异常中断（比如划出元素区域后松手） - 避免在
touchstart里直接执行业务逻辑，防止快速连点误触发；把逻辑放在@click里，只用 touch 系列控制视觉态 - 样式上推荐用
opacity或background-color变化，避免触发布局重排（reflow）
简短示例：<view class="btn" :class="{ 'btn-pressed': isPressed }" true false>确定</view>
自定义高亮样式容易被忽略的兼容性坑
你以为加个 opacity: 0.7 就完事？实际部署时可能发现：iOS App 里没变化、某些安卓机卡顿、H5 在 Safari 下闪一下就恢复。
- 不要用
transition: all，统一指定属性，比如transition: opacity 0.15s ease-in，否则部分低端 Android 会掉帧 - 避免在
hover-class或 pressed class 里改height/width/padding，这会触发 layout，尤其在列表中滚动时明显卡顿 - 微信小程序中，如果父容器用了
position: fixed，子元素的hover-class可能失效，换用 JS 方案 - App 端调试时记得真机测试——模拟器里的“点击反馈”是假的，它只是模拟了鼠标事件
复杂点在于：没有银弹方案。H5 能用纯 CSS，小程序勉强靠 hover-class，App 必须 JS 控制。别想着一套代码打所有端，得按端拆逻辑。
