uniapp实现 uview1 u-button的水波纹效果
说明:
由于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>