当前位置：首页 > news >正文

uniapp实现 uview1 u-button的水波纹效果

news 2025/3/14 10:34:43

说明：

由于uview2已经移除水波纹效果，这边又觉得那个效果好看，所以开发这个功能(原谅我不会录动图)

效果：

水波纹

具体代码：

<view class="ripple-container" @touchstart="handleTouchStart" @touchend="handleTouchEnd"><view class="btn"><text>登录</text></view><!-- 水波纹元素 --><view v-if="showRipple" class="ripple-effect" :style="{left: rippleX + 'px',top: rippleY + 'px',width: rippleSize + 'px',height: rippleSize + 'px'}"></view>
</view><script>export default {data() {return {// 水波纹showRipple: false,rippleX: 0,rippleY: 0,rippleSize: 0 // 根据按钮大小动态计算};},methods: {handleTouchStart(event) {// 获取按钮布局信息const query = uni.createSelectorQuery().in(this);query.select('.ripple-container').boundingClientRect(rect => {if (!rect) return;// 计算点击位置（相对于按钮）const touch = event.touches[0];this.rippleX = touch.clientX - rect.left;this.rippleY = touch.clientY - rect.top;// 计算波纹大小（取按钮宽高中的最大值）this.rippleSize = Math.max(rect.width, rect.height);// 触发动画this.showRipple = true;}).exec();},handleTouchEnd() {// 动画结束后重置状态setTimeout(() => {this.showRipple = false;}, 600); // 与动画时间保持一致}}}
</script><style lang="scss" scoped>.btn {border: none;border-radius: 10rpx;color: #fff;background-color: #3f39ff;padding: 10rpx 20rpx;}// 水波纹样式.ripple-container {position: relative;display: inline-block;overflow: hidden;@keyframes ripple {from {transform: translate(-50%, -50%) scale(0);opacity: 1;}to {transform: translate(-50%, -50%) scale(2);opacity: 0;}}.ripple-effect {position: absolute;z-index: 0;background: rgba(0, 0, 0, 0.15);border-radius: 100%;background-clip: padding-box;transform: translate(-50%, -50%);pointer-events: none;user-select: none;transform: scale(0);opacity: 1;transform-origin: center;animation: ripple 0.6s ease-out;}}
</style>