更新记录

1.0.0（2025-06-30） 下载此版本

水波纹动画支持本地图片/网络图片/自定义view/图标

平台兼容性

uni-app(4.66)

uni-app x(4.66)

其他

WL-Ripple 一个基于 UniApp 框架的自定义水波纹动画组件，适用于微信小程序、H5 等多平台。支持显示本地图片、网络图片、自定义 View 和图标内容，提供灵活的尺寸、边距和颜色配置。 项目介绍 WL-Ripple 是一个轻量级的 Vue 组件，设计用于在 UniApp 项目中实现圆形水波纹动画效果。组件支持多种内容类型（图片、图标、自定义 View），并允许用户自定义组件大小、水波纹扩散范围、背景颜色和内容样式。适用于需要动态视觉效果的场景，如按钮、头像或图标动画。 作者: WL联系方式:

用法

import WlRipple from '@/components/WlRipple/WlRipple.vue'; // 确保组件路径正确

components: {
    WlRipple // 局部注册组件
},

<view class="demo-section">
    <text class="demo-title">本地图片（小尺寸）</text>
    <wl-ripple
        :wlType="true"
        customContent="static/logo.png"
        contentType="image"
        rippleColor="#FFF"
        rippleEffectColor="rgba(0,128,0,0.1)"
        :width="50"
        :height="50"
        :contentPadding="10"
        :maxRippleSize="40"
        @image-error="onImageError"
    />
</view> 
<!-- 网络图片：中等尺寸，红色主题 -->
<view class="demo-section">
    <text class="demo-title">网络图片</text>
    <wl-ripple
        :wlType="false"
        customContent="https://picsum.photos/200"
        contentType="image"
        rippleColor="#F0F0F0"
        rippleEffectColor="rgba(255,0,0,0.1)"
        :width="80"
        :height="80"
        :contentPadding="5"
        :maxRippleSize="60"
        @image-error="onImageError"
    />
</view> 
<!-- 自定义 View：蓝色主题，较大边距 -->
<view class="demo-section">
    <text class="demo-title">自定义 View</text>
    <wl-ripple
        :wlType="true"
        contentType="view"
        rippleColor="#E6F3FF"
        rippleEffectColor="rgba(0,0,255,0.1)"
        :width="120"
        :height="120"
        :contentPadding="20"
        :maxRippleSize="80"
    >
        <template #custom-content>
            <view style="font-size: 24px; color: blue;">自定义</view>
        </template>
    </wl-ripple>
</view>

<!-- 图标：绿色主题，Unicode 字符 -->
<view class="demo-section">
    <text class="demo-title">图标</text>
    <wl-ripple
        :wlType="true"
        customContent="✔"
        contentType="icon"
        rippleColor="#FFF"
        iconColor="#008000"
        rippleEffectColor="rgba(0,128,0,0.1)"
        :width="100"
        :height="100"
        :contentPadding="10"
        :maxRippleSize="80"
    />
</view>