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

说明:

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

效果:

具体代码:

javascript 复制代码
<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>
相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq3 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app