uni-app中需自定义实现水波纹效果：监听touchstart获取e.detail.x/y坐标，动态创建absolute定位的圆形ripple元素，用transition实现缩放与透明度动画，并在新波纹创建前清除旧节点、禁用disabled状态触发。
uni-app里怎么给按钮加水波纹点击效果
原生小程序和 H5 都不直接支持 ripple，uni-app 也没内置水波纹组件，得自己实现。核心思路是：监听 touchstart 事件获取坐标，动态创建一个带缩放+透明度动画的圆形元素，再用 CSS 动画收尾。
注意：不能只靠 click，必须用 touchstart + touchend 或 transitionend，否则 iOS 上延迟明显，Android 上可能触发不了。
自定义水波纹组件的关键 DOM 结构
水波纹必须相对于按钮“定位”，所以父容器要设 position: relative，水波纹元素用 position: absolute 并通过 left/top 定位到触摸点。常见错误是忘了加 overflow: hidden，导致波纹溢出圆角边界。
- 按钮外层加
class="ripple-container"，并设置position: relative; overflow: hidden; - 水波纹
<view class="ripple"></view>动态插入到该容器内 - 水波纹初始样式必须含：
position: absolute; border-radius: 50%; background: rgba(0,0,0,0.1); transform: scale(0); pointer-events: none; - 动画用
transition: transform 0.4s, opacity 0.4s，不要用animation，否则不好控制取消逻辑
touchstart 坐标计算容易错在哪
直接用 event.touches[0].clientX 在某些安卓机型或微信开发者工具里会偏移，因为 uni-app 的 touchstart 事件对象在不同平台下 clientX/clientY 行为不一致。稳妥做法是用 event.detail.x 和 event.detail.y —— 这是 uni-app 封装后统一归一化的坐标。
- 正确写法：
const x = e.detail.x - rect.left（rect是按钮的boundingClientRect） - 别用
e.touches[0].pageX，H5 下没问题，但小程序里可能为undefined - 记得调用
uni.createSelectorQuery()获取按钮真实位置，别用offsetLeft/offsetTop，它们在 flex 布局下不可靠 - 如果按钮有
padding，坐标不用手动减，因为boundingClientRect返回的是内容区左上角
如何避免连续点击产生多个水波纹
用户快速连点时，前一个波纹动画还没结束，新波纹就叠加进来，视觉混乱还影响性能。最简单有效的办法是：每次 touchstart 前先清除上一个未完成的波纹节点，并重置其动画状态。
- 用
this.rippleEl?.remove()清掉旧节点（存个引用比反复 query 更快） - 不要等
transitionend再删节点，而是在新波纹创建前立刻删旧的 - 加个节流：
if (this.isRippling) return;，配合setTimeout(() => { this.isRippling = false; }, 400) - 如果按钮是
disabled状态，务必在事件监听器开头if (this.disabled) return，否则仍会触发
水波纹看似简单，但跨端坐标、动画中断、节点清理这三点，漏掉任何一个都会在真机上出问题。特别是 iOS 微信里，transform: scale(0) 初始状态不生效的情况很常见——得加一句 transform: translateZ(0) 强制 GPU 加速。
