uni-app中ripple波纹无效是因为小程序等平台不支持view的::after伪元素，需改用绝对定位view动态创建波纹，text标签需外层view包裹并监听点击，小程序应使用uni.createAnimation而非CSS动画，跨平台封装需注意性能差异。
uni-app 中用 ripple 类模拟波纹效果为什么没反应？
因为 uni-app 的 view 默认不支持 ::after 伪元素在部分平台（尤其是小程序端）渲染，直接套用 Web 端的「绝对定位 + 伪元素 + scale 动画」方案会失效。H5 端可能正常，但微信小程序、App 端大概率看不到波纹。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用一个绝对定位的
view作为波纹容器，动态插入到点击元素内部或同级位置 - 通过
getBoundingClientRect()获取点击坐标，计算波纹圆心相对于父容器的left和top - 波纹
view必须设position: absolute、border-radius: 50%、transform-origin: center - 动画用
animation（而非transition），确保触发后立即播放，避免因 setData 延迟导致卡顿
如何在 text 标签上监听点击并触发波纹？
text 是行内组件，不支持 position: relative 和子元素绝对定位，也不能直接挂载波纹 view。必须包裹一层 view，并把点击事件和样式控制逻辑放在外层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 结构写成
<view class="ripple-wrapper"><text>点我</text></view> -
ripple-wrapper设position: relative，且宽高由内容撑开（必要时加display: inline-flex防塌陷） - 在
handleRippleClick中动态创建波纹view并 append 到ripple-wrapper内部（使用this.$nextTick确保 DOM 更新） - 点击事件需加
stopPropagation()，防止多次快速点击生成多个波纹节点
小程序平台下 animation 不生效的常见原因
微信小程序的 animation API 和 CSS @keyframes 行为不一致：CSS 动画在 setData 后才触发，而 setData 本身有延迟，容易造成「点了没反应」或「波纹突然放大后消失」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃纯 CSS
@keyframes，改用uni.createAnimation创建动画实例（兼容性更好） - 动画 duration 控制在
300ms以内，否则用户感知明显延迟 - 动画结束后务必调用
animation.export()并更新 data 中的animationData，否则下次点击无法重播 - 波纹颜色推荐用半透明白色（
rgba(255,255,255,0.3)），避免深色背景上不显眼
要不要封装成自定义组件？
可以，但要注意跨平台差异——App 端支持 transform: scale() 更平滑，H5 支持 will-change: transform 提升性能，而小程序只能靠 canvas 或逐帧 setData 模拟，成本高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单场景（如按钮文字）直接在页面内实现，避免组件通信开销
- 若需复用，组件 props 至少暴露：
color（波纹色）、duration（毫秒）、disabled（禁用状态） - 组件内用
watch监听disabled，true 时清空所有波纹节点并移除事件监听 - 别在组件里用
setTimeout清理波纹节点，应监听动画结束回调（animationend或uni.createAnimation的完成钩子）
真正难的不是让波纹动起来，而是让它在三个平台都「刚好动得自然」——小程序要省节点，H5 要防重绘，App 要避闪屏。动手前先跑通一个平台，再逐个对齐行为。
