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

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

news 来源：原创 2025/8/18 3:55:55

说明：

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

相关文章：

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

说明&#xff1a; 由于uview2已经移除水波纹效果&#xff0c;这边又觉得那个效果好看&#xff0c;所以开发这个功能(原谅我不会录动图) 效果&#xff1a; 具体代码&#xff1a; <view class"ripple-container" touchstart"handleTouchStart" touchend&…...

编程日记 2025/8/18 3:55:55

Linux练级宝典-＞任务管理和守护进程

任务管理 进程组概念 每个进程除了进程ID以外&#xff0c;还有一个进程组&#xff0c;进程组就是一个或多个进程的集合 同一个进程组&#xff0c;代表着他们是共同作业的&#xff0c;可以接收同一个终端的各种信号&#xff0c;进程组也有其唯一的进程组号。还有一个组长进程&a…...

编程日记 2025/8/16 12:56:24

金融行业替换传统的FTP传输系统的必要性

在如今这个数字化飞速发展的时代&#xff0c;金融行业对于信息安全性和数据传输效率的要求简直高得离谱。可是呢&#xff0c;你可能想不到&#xff0c;很多金融机构竟然还在用传统的FTP&#xff08;文件传输协议&#xff09;来处理日常的数据交换。 FTP在过去几十年里确实是网络…...

编程日记 2025/8/18 3:55:54

C# backgroundworker类(后台线程)

概念 在C#程序中&#xff0c;经常会有一些耗时较长的CPU密集型运算&#xff0c;如果直接在 UI 线程执行这样的运算就会出现UI不响应的问题。解决这类问题的主要途径是使用多线程&#xff0c;启动一个后台线程&#xff0c;把运算操作放在这个后台线程中完成。但是原生接口的线程…...

编程日记 2025/8/16 11:30:46

OpenAI智能体初探：使用 OpenAI Responses API 在 PDF 中实现检索增强生成（RAG）

大家好，我是大 F，深耕AI算法十余年，互联网大厂技术岗。 知行合一，不写水文，喜欢可关注，分享AI算法干货、技术心得。 欢迎关注《大模型理论和实战》、《DeepSeek技术解析和实战》，一起探索技术的无限可能！ 引子 在信息爆炸的时代，从大量 PDF 文档中快速准确地检索信息…...

编程日记 2025/8/16 9:45:24

SqlServer数据库报错紧急或可疑无法访问的修复过程，亲测有效。

当 SQL Server 数据库被标记为 SUSPECT 状态时&#xff0c;表示数据库可能由于事务日志损坏、数据文件丢失或其他严重问题而无法正常启动。以下是一个详细的恢复步骤&#xff0c;基于搜索结果中的信息和常见的最佳实践&#xff1a; 恢复步骤 1. 确认数据库状态 将database-n…...

编程日记 2025/8/18 1:35:01

12.31[net]review

复用&#xff08;Multiplexing&#xff09;的概念 定义&#xff1a;在传输层&#xff0c;复用是指多个应用进程可以使用同一个传输层协议&#xff08;如 TCP 或 UDP&#xff09;来发送数据。从应用层的角度看&#xff0c;不同的应用进程&#xff08;如网页浏览器、邮件客户端等…...

编程日记 2025/8/16 9:50:12

Redis超高并发分key实现

Redis扛并发的能力是非常强的&#xff0c;所以高并发场景下经常会使用Redis&#xff0c;但是Redis单分片的写入瓶颈在2w左右&#xff0c;读瓶颈在10w左右&#xff0c;如果在超高并发下即使是集群部署Redis&#xff0c;单分片的Redis也是有可能扛不住的&#xff0c;如下图所示&a…...

编程日记 2025/8/16 9:51:21

Houdini学习笔记

1. Houdini中一次只能显示一个物体 如果要都显示 需要 merge 节点 粉色的是 以参考显示 2.对任意一个节点按F1 可以弹出houdini官方文档 3. 恢复视角 Space H,居中 Space G 居中选中物体...

编程日记 2025/8/16 11:54:49

Ubuntu 22.04使用pigz多线程快速解压/压缩文件

最近搞项目&#xff0c;资料太大&#xff0c;解压时间太久&#xff0c;于是想办法解决。 开贴记录。 1.安装pigz sudo apt install pigz 2.解压资料 解压命令为 tar --use-compress-programpigz -xvpf ***.tar.gz 将最后的部分***.tar.gz换成你自己的文件即可 例如 ti…...

编程日记 2025/8/16 12:56:32

子数组问题——动态规划

个人主页&#xff1a;敲上瘾-CSDN博客 动态规划 基础dp&#xff1a;基础dp——动态规划-CSDN博客多状态dp&#xff1a;多状态dp——动态规划-CSDN博客 目录 一、解题技巧 二、最大子数组和 三、乘积最大子数组 四、最长湍流子数组 五、单词拆分 一、解题技巧 区分子数组&…...

编程日记 2025/8/16 11:18:46

汉桑科技IPO：潜藏两大风险 公众投资者权益或受损

冰山之所以危险&#xff0c;是因为只有八分之一在水面上。 ——语出小说家海明威。 引 言 野村证券提供的一份报告显示&#xff0c;2025年前两个月&#xff0c;我国出口同比增长仅有2.3%&#xff0c;与去年四季度9.9%的增长显著下滑。与此同时&#xff0c;从2月1日开始&a…...

编程日记 2025/8/16 11:31:18

【3DGS】SuperSplat本地运行+修改监听端口+导入ply模型+修剪模型+在线渲染3DGS网站推荐

SuperSplat官网代码&#xff1a;https://github.com/playcanvas/supersplat 本地安装和运行 Clone the repository: git clone https://github.com/playcanvas/supersplat.git cd supersplat Install dependencies: npm install Build SuperSplat and start a local web ser…...

编程日记 2025/8/16 11:21:24

整数与字节序列相互转换

以下函数是用于二进制编解码的核心工具函数&#xff0c;实现 32/64 位整数与字节流之间的高效转换。 操作逻辑&#xff1a;将整数的每个字节依次写入缓冲区&#xff0c;从最低有效字节到最高有效字节内存布局&#xff1a;假设 value0x12345678&#xff0c;地址由低到高依次是0…...

编程日记 2025/8/16 9:52:38

嵌入式软件测试的东方智慧：WinAMS工具的技术哲学与实践启示——一名汽车电子工程师的七年工具演进观察

引言&#xff1a;在丰田精益生产线上诞生的测试哲学 2017年参与某日系车企的ECU&#xff08;电子控制单元&#xff09;联合开发时&#xff0c;我第一次在名古屋工厂见到产线旁部署的WinAMS测试站。不同于欧美工具强调的“全流程覆盖”&#xff0c;这个诞生于日本制造业精益文化…...

编程日记 2025/8/15 19:44:22

卫星遥感赋能气象服务：精准预测，智享生活

卫星遥感技术作为现代气象服务的“千里眼”和“顺风耳”&#xff0c;正以前所未有的精度和效率&#xff0c;革新着我们对天气的观测、预报与应对方式。今天&#xff0c;就让我们一同探索卫星遥感在气象服务中的奇妙应用。 星图云开放平台&#xff1a;专业气象的智慧之选 高精度…...

编程日记 2025/8/15 23:03:34

多个nodejs版本切换使用教程

想要多个nodejs版本来回切换TOC 先卸载本地已安装的nodejs下载安装nvm ,下载地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases打开链接后 &#xff0c;选择 nvm-setup.exe 安装&#xff0c;安装路径避免空格和中文&#xff08;如 D:\nvm&#xff09; 选择…...

编程日记 2025/8/17 16:13:48

Vue.js 3 的设计思路：从声明式UI到高效渲染机制

目录 一、声明式UI与虚拟DOM的灵活性 二、渲染器&#xff1a;虚拟DOM到真实DOM的桥梁 三、组件的本质与实现 四、编译与运行时的协同优化 五、性能与可维护性的权衡 总结 Vue.js 3 作为新一代前端框架&#xff0c;其设计理念在声明式UI描述、虚拟DOM优化、组件化架构…...

编程日记 2025/8/16 12:03:43

Python控制语句 ——break和continue

1.以下关于Python循环结构的描述中,错误的是() 。 A、break用来结束当前当次语句，但不跳出当前的循环体。 B、遍历循环中的遍历结构可以是字符串、文件、组合数据类型和range函数等。 C、Python通过for，while等保留字构建循环结构。 D、continue只结束本次循环。 答案：A。在…...

编程日记 2025/8/17 13:00:36

Linux websocket服务器、配网方法、QT客户端程序

一、linux websocket服务器 参考下面的代码编译和运行 websocket_for_linux: c语言实验websocket通信&#xff0c;含服务端和客户端示例代码 二、网络配置 Linux本地开启server和client&#xff0c;可正常通信。 换局域网另外一台PC后无法测试通过。 解决办法&#xff1a;…...

编程日记 2025/8/16 11:26:38

Python网络爬虫之requests库的使用方法

requests库是Python中用于发送HTTP请求的一个重要库，在实际应用中，它被广泛用于爬取网页数据、调用API接口等。本节将详细讲解requests库的使用流程，包括发送HTTP请求、携带请求参数、处理服务器响应以及错误处理，帮助读者掌握requests库的基本使用方法。 1. 使用requests库…...

编程日记 2025/8/16 12:17:31

一、初识Docker【安装基础案例】

开始学习docker容器技术&#xff0c;本文介绍如何安装docker、基本概念和一个简单的容器案例。 1. 安装docker 1.1 yum源方式安装 # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils# Step 2: 添加软件源信息 yum-config-manager --add-repo <https://mir…...

编程日记 2025/8/16 11:17:16

stm32 f4 flash 调用时卡死

【HAL库】STM32F407----内部Flash的读写_stm32f407 flash-CSDN博客 参照此博客&#xff0c;如果调用flash 卡死的原因是谢日adress不准确&#xff0c;得到0x08010000 成功运行...

编程日记 2025/8/16 12:48:10

uv pip install -r requirements.txt-报错，python版本过低

升级Python版本&#xff08;推荐&#xff09; browser-use0.1.40 需要 Python ≥3.11&#xff0c;但你的环境是 Python 3.10.12。升级Python版本是最直接的解决方案&#xff1a; 安装Python 3.11&#xff1a; 使用 pyenv&#xff08;Linux/macOS&#xff09;&#xff1a;pyenv…...

编程日记 2025/8/17 14:37:09

c++ 中的float和double 的区别 开发过程中使用哪个更好

在 C 中&#xff0c;float 和 double 都是用于表示浮点数的数据类型&#xff0c;但它们在精度、存储空间和性能方面有所不同。 1. float 和 double 的主要区别 特性floatdouble占用内存4 字节&#xff08;32 位&#xff09;8 字节&#xff08;64 位&#xff09;精度约 6-7 位有…...

编程日记 2025/8/16 12:02:07

工厂模式加策略模式 -- 具体实现

这里写目录标题 定义接口定义抽象类定义主处理器分支处理器定义工厂demo 定义接口 public interface EntityHandler extends InitializingBean {MatchContentDTO match(MatchEntityDTO matchEntityDTO);String supportEntityType(); }定义抽象类 public abstract class Abstr…...

编程日记 2025/8/16 12:59:59

Redis7——进阶篇（五）

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09;Redis&#xff08;二&#xff09;Redis&#xff08;三&#xff09;Redis&#x…...

编程日记 2025/8/16 9:53:13

什么是全栈？

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点下班 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 &#x1f4c3;文章前言 &#x1f537;文章均为学习工…...

编程日记 2025/8/16 11:22:18

vue3实现虚拟滚动Vue-Virtual-Scroller

前端优化不可不避的一谈之虚拟滚动&#xff1a;众所周知&#xff0c;滚动是直挺挺的往dom树加东西&#xff0c;如果滚太多滚到万级&#xff0c;渲染过多就会卡顿&#xff0c;而vue-virtual-scroll的灵活懒渲染就能解决这个问题 1&#xff0c;下载与配置 npm install --save v…...

编程日记 2025/8/16 11:47:28

Flutter Dart 运算符全面解析

引言 在 Dart 语言中&#xff0c;运算符是用于执行各种操作的特殊符号。这些操作可以是算术运算、逻辑运算、比较运算等。了解并熟练运用这些运算符是进行 Flutter 开发的基础。本文将详细介绍 Dart 中常见的运算符&#xff0c;并结合代码示例进行说明。 1. 算术运算符 算术…...

编程日记 2025/8/16 11:24:41

XXE-labs靶场通关攻略

1.把相关压缩包放到www根目录下 2.解压&#xff0c;并且把php_xxe放在www目录下 3.进行访问发现是登陆页面 4.随便试试账号密码进行抓包 5.发送到重放器&#xff0c;发现username是回显点 6.可以利用xxe漏洞 <?xml version"1.0"?> //xml声明不重要&#x…...

编程日记 2025/8/18 2:02:57

Redis 主从复制详解：实现高可用与数据备份

目录 引言 1. 什么是 Redis 主从复制&#xff1f; 1.1 定义 1.2 核心概念 2. Redis 主从复制的工作原理 2.1 复制流程 2.2 复制流程图 3. Redis 主从复制的配置方法 3.1 通过配置文件配置 主节点配置 从节点配置 3.2 通过命令行配置 设置从节点 取消从节点 4. Re…...

编程日记 2025/8/16 11:56:56

文件解析漏洞靶场通关合集

一、IIS解析漏洞 &#xff08;一&#xff09;iis6的目录解析漏洞(.asp目录中的所有文件都会被当做asp文件执行) 第一步&#xff1a;在网站根目录下创建了一个x.asp文件夹&#xff0c;并在文件夹中创建一个名为1.txt的文本文档 第二步&#xff1a;文本文档中输入<% now()%&…...

编程日记 2025/8/17 3:59:46

vue的 props 与 $emit 以及 provide 与 inject 的 组件之间的传值对比

好的&#xff0c;下面是 props 与 $emit 以及 provide 与 inject 的对比&#xff1a; 1. props 与 $emit props&#xff1a;父组件通过 props 向子组件传递数据&#xff0c;子组件接收后不可修改。子组件只能读取 props 传递给它的数据。如果需要修改或更新父组件的状态&#…...

编程日记 2025/8/16 11:27:49

数据结构——环形数组

环形数组 start 指向第一个有效元素的索引&#xff0c;end 指向最后一个有效元素的下一个位置索引。 注意&#xff1a; start是闭区间&#xff0c;先左移后赋值&#xff0c;先赋值(null)后右移&#xff1b;end是开区间&#xff0c;先赋值再右移&#xff0c;先左移再赋值(null…...

编程日记 2025/8/16 11:12:37

k8s面试题总结（十五）

1.如何使用Kubernetes进行多环境部署&#xff08;如开发&#xff0c;测试和生产环境&#xff09;&#xff1f; 使用命名空间&#xff08;namespaces&#xff09;&#xff1a; 命名空间是用于逻辑隔离和资源分组的一种方式&#xff0c;可以为每个环境创建单独的命名空间。 2.使…...

编程日记 2025/8/16 1:37:45

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

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

编程日记 2025/8/16 12:40:19

蓝桥杯 17110抓娃娃

问题描述 小明拿了 n 条线段练习抓娃娃。他将所有线段铺在数轴上&#xff0c;第 i 条线段的左端点在 li&#xff0c;右端点在 ri​。小明用 m 个区间去框这些线段&#xff0c;第 i个区间的范围是 [Li​, Ri​]。如果一个线段有 至少一半 的长度被包含在某个区间内&#xff0c;…...

编程日记 2025/8/16 9:50:44

探索高性能AI识别和边缘计算 | NVIDIA Jetson Orin Nano 8GB 开发套件的全面测评

随着边缘计算和人工智能技术的迅速发展&#xff0c;性能强大的嵌入式AI开发板成为开发者和企业关注的焦点。NVIDIA近期推出的Jetson Orin Nano 8GB开发套件&#xff0c;凭借其40 TOPS算力、高效的Ampere架构GPU以及出色的边缘AI能力&#xff0c;引起了广泛关注。本文将从配置性…...

编程日记 2025/8/16 9:45:23

基于强化学习建立代理模型来预测飞机升阻力特性的一般步骤

以下是一个基于强化学习建立代理模型来预测飞机升阻力特性的一般步骤&#xff1a; 1. 问题定义与环境设置 明确目标&#xff1a;确定要准确预测飞机在不同飞行条件下的升力和阻力系数。状态空间定义&#xff1a;选取与飞机升阻力相关的状态变量&#xff0c;如飞行速度、攻角、…...

编程日记 2025/8/16 9:45:28

使用Qt创建悬浮窗口

在Qt中创建悬浮窗口&#xff08;如无边框、可拖动的浮动面板或提示框&#xff09;可以通过以下方法实现。以下是几种常见场景的解决方案&#xff1a; 方法1&#xff1a;使用无边框窗口 鼠标事件拖动 适用于自定义浮动工具窗口&#xff08;如Photoshop的工具栏&#xff09;。 …...

编程日记 2025/8/15 13:33:03

C/C++都有哪些开源的Web框架？

CppCMS CppCMS是一个采用C语言开发的高性能Web框架&#xff0c;通过模版元编程方式实现了在编译期检查RESTful路由系统&#xff0c;支持传统的MVC模式和多种语言混合开发模式。 CppCMS最厉害的功能是WebSocket&#xff0c;10万连接在内存中长期保存占用的大小不超过600MB&…...

编程日记 2025/8/16 11:57:30

Unity基于C#+UGUI解决方案，制作每日签到系统（本地存储签到数据）

一、需求介绍：基于本地存储系统制作一个每日签到系统界面，相关签到界面如下图所示，点击“签到有礼”按钮后就会跳转到“每日登录礼”这个界面，点击“立即签到”按钮之后，按钮就会置灰，而且按钮的文字会变成“等待明日”。 二、制作界面显示相关功能，需要在Unity中新建一…...

编程日记 2025/8/16 12:37:59

VBA+FreePic2Pdf 找出没有放入PDF组合的单个PDF工艺文件

设计部门针对某个项目做了一个工艺汇总报告&#xff0c;原先只要几十个工艺文件&#xff0c;组合成一个PDF&#xff0c;但后来要求要多放点PDF进去&#xff0c;但工艺文件都混在一起又不知道哪些是重复的&#xff0c;找上我让我帮忙处理一下&#xff0c;我开始建议让她重新再组…...

编程日记 2025/8/16 13:06:13

工程化与框架系列（31）--前端依赖管理实践

前端依赖管理实践 &#x1f4e6; 引言 前端依赖管理是现代Web开发中的重要环节。本文将深入探讨前端依赖管理的最佳实践&#xff0c;包括包管理工具、版本控制、依赖分析和优化等方面&#xff0c;帮助开发者更好地管理项目依赖。 依赖管理概述 前端依赖管理主要包括以下方面…...

编程日记 2025/8/16 9:51:44

【vscode-01】vscode不同项目不同语言扩展插件隔离方案

vscode不同项目不同语言扩展插件隔离方案 1. 背景2. vscode 扩展插件隔离方案2.1 code-profile 配置文件2.2 配合extensions.json 1. 背景 最近打开vscode 发现越来越卡&#xff0c;这是一个轻量级代码编辑器&#xff0c;怎么会如此占用内存呢&#xff1f; 我使用了‘code --l…...

编程日记 2025/8/16 9:45:18

17 | 实现简洁架构的 Biz 层

提示&#xff1a; 所有体系课见专栏&#xff1a;Go 项目开发极速入门实战课&#xff1b;欢迎加入 云原生 AI 实战 星球&#xff0c;12 高质量体系课、20 高质量实战项目助你在 AI 时代建立技术竞争力&#xff08;聚焦于 Go、云原生、AI Infra&#xff09;&#xff1b;本节课最终…...

编程日记 2025/8/15 13:01:14

DNS解析错误要怎么处理

在互联网时代&#xff0c;网络已经成为人们生活和工作中不可或缺的一部分。然而&#xff0c;当遇到DNS 解析错误时&#xff0c;原本畅通无阻的网络访问会突然陷入困境&#xff0c;让人感到十分困扰。DNS&#xff0c;即域名系统&#xff0c;它如同互联网的电话簿&#xff0c;将人…...

编程日记 2025/8/16 9:45:25

【Rust基础】Rust后端开发常用库

使用Rust有一段时间了&#xff0c;期间尝试过使用Rust做后端开发、命令行工具开发&#xff0c;以及做端侧模型部署&#xff0c;也尝试过交叉编译、FFI调用等&#xff0c;也算是基本入门了。在用Rust做后端接口开发时&#xff0c;常常会找不到一些合适库&#xff0c;而这些库在J…...

编程日记 2025/8/16 9:45:21

【附JS、Python、C++题解】Leetcode面试150题（9）——三数之和

一、题目​​​​​ 15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足&#xff1a; i!j、i!k 且 j! k &#xff0c;同时还满足&#xff1a;nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意…...

编程日记 2025/8/16 9:50:55