uniapp水波纹动画

Uniapp提供了一种简单的方式来实现水波纹动画，可以通过使用uniui组件库中的"uni-ripple"组件来实现。下面是实现步骤：

1. 在uniapp项目中安装uni-ui组件库，可以通过命令行输入如下命令来安装：

npm install @dcloudio/uni-ui

2. 在需要使用水波纹动画的页面中引入"uni-ripple"组件：

<template>
  <view class="container">
    <uni-ripple class="ripple"></uni-ripple>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

3. 可以通过css样式来设置"uni-ripple"组件的样式，例如：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.ripple {
  width: 200px;
  height: 200px;
  background-color: #007aff;
  border-radius: 50%;
  color: #fff;
  font-size: 36px;
  text-align: center;
  line-height: 200px;
}

4. 运行uniapp项目，即可看到"uni-ripple"组件实现的水波纹动画效果。

需要注意的是，"uni-ripple"组件只支持在button、a、label等组件上使用，如果需要在其他组件上使用，需要添加"uni-ripple"指令，例如：

<view uni-ripple class="ripple"></view>