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

news2025/3/15 0:27:15

说明:

由于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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2315145.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用Cursor的claude-3.7模型来开发高保真的原型设计图,学会写好的提示词人人都是设计师

1、想要开发出高保真的设计图原型&#xff0c;需要给出cursor具体的提示词&#xff1a;比如我想开发一款IT面试题小程序&#xff0c;给出的提示词是这样的 我想开发一个 {IT面试题库小程序}&#xff0c;现在需要输出高保真的原型图&#xff0c;请通过以下方式帮我完成所有界面…

AGI大模型(5):提示词工程

1 什么是提示词工程&#xff08;Prompt&#xff09; 所谓的提示词其实指的就是提供给模型的⼀个⽂本⽚段&#xff0c;⽤于指导模型⽣成特定的输出或回答。提示词的⽬的是为模型提供⼀个任务的上下⽂&#xff0c;以便模型能够更准确地理解⽤户的意图&#xff0c;并⽣成相关的回…

[LeetCode热门100题]|137,260,268,面试17.19

1、137 只出现一次数字|| 1、题目描述 137 只出现一次数字||https://leetcode.cn/problems/single-number-ii/description/ 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你…

Android子线程更新View的方法原理

对于所有的Android开发者来说&#xff0c;“View的更新必须在UI线程中进行”是一项最基本常识。 如果不在UI线程中更新View&#xff0c;系统会抛出CalledFromWrongThreadException异常。那么有没有什么办法可以不在UI线程中更新View&#xff1f;答案当然是有的&#xff01; 一…

Kafka常用指令(详细)

Kafka常用指令&#xff08;详细&#xff09; 启停命令 前台启动 前台启动命令 ./bin/kafka-server-start.sh config/server.properties 后台启动方式1 后台启动命令加上参数-daemon&#xff0c;窗口关闭之后kafka后台程序继续运行 ./bin/kafka-server-start.sh -daemon co…

2025移动端软件供应链安全开源治理方案最佳实践

2025年3月13日&#xff0c;由中国软件评测中心、CAPPVD漏洞库联合主办的“第六期移动互联网APP产品安全漏洞技术沙龙”在海口成功召开。悬镜安全基于移动端数字供应链安全开源治理方案荣获中国软件评测中心“2024移动互联网APP产品安全漏洞治理”优秀案例&#xff0c;并获颁证书…

《C#上位机开发从门外到门内》2-3:SPI总线协议详解及应用实践

文章目录 一、引言二、SPI总线协议的基本原理三、SPI通信模式详解 —— CPOL与CPHA3.1 时钟极性&#xff08;CPOL&#xff09;3.2 时钟相位&#xff08;CPHA&#xff09;3.3 四种SPI模式 四、主从设备通信机制4.1 通信流程概述4.2 数据帧结构与传输细节4.3 主设备与从设备的协同…

vscode出现:No module named ‘requests‘ 问题的解决方法

问题&#xff1a; ① No module named requests ② pip install requests&#xff1a;显示已经安装成功 运行失败原因&#xff1a; 我的失败原因是因为&#xff1a;我的python环境有两个&#xff0c;电脑C盘默认一个、pycharm下载后在它的路径下有一个。而vscode所运行的环境…

【openwebui 搭建本地知识库(RAG搭建本地知识库)】

安装准备 openwebui 这个本地安装之前写过使用python安装。也可以直接用docker 命令 docker run --rm -d \-p 3080:8080 \-p 3081:8081 \-e WEBUI_AUTHtrue \-e DEFAULT_LOCALEcn \-e GLOBAL_LOG_LEVEL"INFO" \-e AIOHTTP_CLIENT_TIMEOUT100 \--privilegedtrue \-…

雷池WAF 处理 HTTP 请求的流程

项目介绍 SafeLine&#xff0c;中文名 "雷池"&#xff0c;是一款简单好用, 效果突出的 Web 应用防火墙(WAF)&#xff0c;可以保护 Web 服务不受黑客攻击。 雷池通过过滤和监控 Web 应用与互联网之间的 HTTP 流量来保护 Web 服务。可以保护 Web 服务免受 SQL 注入、…

JAVA-Thread类实现多线程

引言&#xff1a; 本章博客涉及进程线程内容&#xff0c;如果不了解的可以看&#xff1a;什么是进程线程-CSDN博客 线程是操作系统的概念&#xff0c;操作系统提供的API供程序员使用操作。但是不同的操作系统(Winodws、Linux、Unix……差别很大),但是做为JAVA程序员就不需要担心…

【算法】DFS、BFS、拓扑排序

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;算法 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 持续更新中...1、DFS2、BFSN 叉树的层序遍历二叉树的锯齿形层序遍历二叉树最大宽度 3、多源BFS腐烂的苹果 4、拓扑排序 持续更新中…

MySQL中 IN 到底走不走索引?

文章目录 前言数据库表结构查询sqlEXPLAIN介绍EXPLAIN 的输出每列解释 强制走索引查询时添加条件(复合索引字段)查询小时查询分钟 总结 前言 在 MySQL 中&#xff0c;IN 语句是否能够利用索引取决于多个因素&#xff0c;包括但不限于查询的具体形式、表的统计信息、索引的选择…

centos没有ll

vi /etc/bashrc alias ll‘ls -l’ source /etc/bashrc

腾讯云低代码开发应用

创建客户端应用 如上所示&#xff0c;登录腾讯云微搭低代码业务控制台&#xff0c;开始搭建企业官网应用 如上所示&#xff0c;在腾讯云微搭低代码业务控制台中&#xff0c;开始创建企业官网应用 如上所示&#xff0c;在腾讯云微搭低代码业务控制台中&#xff0c;开始编辑企业官…

深度学习项目--基于DenseNet网络的“乳腺癌图像识别”,准确率90%+,pytorch复现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 如果说最经典的神经网络&#xff0c;ResNet肯定是一个&#xff0c;从ResNet发布后&#xff0c;很多人做了修改&#xff0c;denseNet网络无疑是最成功的…

【Linux 指北】常用 Linux 指令汇总

第一章、常用基本指令 # 注意&#xff1a; # #表示管理员 # $表示普通用户 [rootlocalhost Practice]# 说明此处表示管理员01. ls 指令 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xf…

docker 搭建alpine下nginx1.26/mysql8.0/php7.4环境

docker 搭建alpine下nginx1.26/mysql8.0/php7.4环境 docker-compose.yml services:mysql-8.0:container_name: mysql-8.0image: mysql:8.0restart: always#ports:#- "3306:3306"volumes:- ./etc/mysql/conf.d/mysql.cnf:/etc/mysql/conf.d/mysql.cnf:ro- ./var/log…

Android7上移植I2C-tools

一&#xff0c;下载源码 cd hardware/libhardware/tests git clone https://git.kernel.org/pub/scm/utils/i2c-tools/i2c-tools.git 二&#xff0c; 在 i2c-tools 目录添加 Android.mk 编译文件 LOCAL_PATH: $(call my-dir)################### i2c-tools ###############…

Centos 7 修改语言和输入源为中文+修改终端快捷键复制为Ctrl+C、粘贴为Ctrl+V

目录 修改语言和输入源为中文 1、设置 2、Region & Language&#xff08;区域和语言&#xff09; 3、Add an Input Source&#xff08;添加输入源&#xff09; 4、修改语言为中文 5、Restart&#xff08;重启&#xff09; 6、Log Out &#xff08;注销&#xff09; …