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

实现悬浮按钮拖动,兼容h5和微信小程序

h5用js写,微信小程序用

代码里面没有完全实现吸附边缘的功能,需要吸附边缘的话还得自己再完善下(h5的吸附边缘是可以的,小程序的还有点问题)

主要功能是:图片上写文字的悬浮按钮,文字使用的是::after实现的,图片就用的u-image标签

(图片和文字,用背景图好像更方便诶,文字就用绝对定位、flex或者是margin)

		<template><!-- #ifndef MP-WEIXIN --><view class="btn" :style="{ left: left + 'px', top: top + 'px' }" @touchstart="handleTouchStart"@touchmove.prevent="handleTouchMove" @touchend="handleTouchEnd" @click="clickHandle"><u--image src="放自己的图" width="144rpx"height="128rpx" class="link"></u--image></view><!-- #endif --><!-- #ifdef MP-WEIXIN --><movable-area class="drag-area" style="height:100vh"><movable-view direction="all" :x="x" :y="y" :damping="40" @touchend="handleTouchEnd" class="btn"@click="clickHandle" :animation="false"><u--image src="放自己的图"width="144rpx" height="128rpx"></u--image></movable-view></movable-area><!-- #endif --></template>left: 0,     // 按钮左侧位置top: 0,      // 按钮顶部位置startX: 0,   // 触摸起始X坐标startY: 0,screenWidth: 0,  // 屏幕宽度screenHeight: 0, // 屏幕高度x: 0,           // X轴位置y: 500,           // Y轴位置systemInfo: {},  // 系统信息btnWidth: 72,    // 按钮宽度(px)btnHeight: 64,   // 按钮高度(px)mounted() {const systemInfo = uni.getSystemInfoSync();this.screenWidth = systemInfo.windowWidth;this.screenHeight = systemInfo.windowHeight;this.left = this.screenWidth - this.btnWidth - 10;this.top = 500;this.x = this.screenWidth - this.btnWidth - 10;this.y = 500;},handleTouchStart(e) {// 记录触摸起点this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;},handleTouchMove(e) {if (e.cancelable) e.preventDefault();const deltaX = e.touches[0].clientX - this.startX;const deltaY = e.touches[0].clientY - this.startY;let newLeft = this.left + deltaX;let newTop = this.top + deltaY;newLeft = Math.max(0, Math.min(newLeft, this.screenWidth - this.btnWidth));newTop = Math.max(0, Math.min(newTop, this.screenHeight - this.btnHeight));this.left = newLeft;this.top = newTop;this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;},handleTouchEnd() {// this.autoAttachToEdge();},// 拖动过程中触发onDragChange(e) {// 实时更新位置// this.x = e.detail.x// this.y = e.detail.y},autoAttachToEdge() {// 吸附到左侧或右侧const midScreen = this.screenWidth / 2;if (this.left < midScreen) {this.left = 10; // 吸附到左边} else {this.left = this.screenWidth - this.btnWidth - 10; // 吸附到右边}},// 点击按钮的逻辑clickHandle(){}.btn {position: fixed;z-index: 999;}/* #ifndef MP-WEIXIN */.link {&::after {content: 'XXX';font-size: 24px;color: #fff;position: absolute;bottom: 4px;left: 0;line-height: 34px;width: 100%;text-align: center;z-index: 999;}}/* #endif *//* #ifdef MP-WEIXIN */.btn ::v-deep .u-image::after {content: 'XXX';font-size: 24px;color: #fff;position: absolute;bottom: 4px;left: 0;line-height: 34px;width: 100%;text-align: center;z-index: 999;}/* #endif *//* 拖拽区域必须设置尺寸 */.drag-area {width: 100%;position: fixed;pointer-events: none;/* 防止遮挡下方内容 */z-index: 999;}/* 可拖拽按钮样式 */.btn {width: 144rpx;height: 128rpx;pointer-events: auto;/* 允许交互 */}/* 隐藏movable-view默认边框 */movable-view::before {display: none;}

相关文章:

实现悬浮按钮拖动,兼容h5和微信小程序

h5用js写&#xff0c;微信小程序用 代码里面没有完全实现吸附边缘的功能&#xff0c;需要吸附边缘的话还得自己再完善下&#xff08;h5的吸附边缘是可以的&#xff0c;小程序的还有点问题&#xff09; 主要功能是&#xff1a;图片上写文字的悬浮按钮&#xff0c;文字使用的是…...

SLC跨头协作机制

SLC跨头协作机制 SLC(Self-attention with Local Communication,或类似跨头协作机制)在Transformer架构中通过以下逻辑帮助注意力头优化分布: 1. 多头注意力的「独立-协作」平衡 传统多头注意力中,每个头独立计算注意力(如Query/Key/Value的线性变换),捕捉不同语义模…...

全国医院数据可视化分析系统

【大数据】全国医院数据可视化分析系统 &#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 &#x1f3e5; 项目名&#xff1a;医疗导航神器&#xff01;——《基于大数据的微医挂号网医院数据可视…...

Flash Attention原理讲解

目录 前言0. 简述1. self-attention2. roofline model3. 矩阵分块4. softmax分块5. FlashAttention结语参考 前言 看了几个视频和几篇文章学习了下 Flash Attention&#xff0c;记录下个人学习笔记&#xff0c;仅供自己参考&#x1f604; refer1&#xff1a;Flash Attention 为…...

python二级复习(1)

临近计算机二级考试了,开始python的复习 python语言基础: 1.用缩进表示代码块:一般用四个空格或者一个tab 2.代码的注释方法: 单行注释用“#”表示注释开始&#xff1b;多行注释是用三个英文的单引号“‘’”或双引号““”"”作为注释的开始和结束符号。 03. 标识符命…...

基于cat1的贵重物品的状态和位置小型监控系统特色解析

一 项目需求 团队研发出来一款搭载多传感器的无线cat1定位和状态监控的设备。该设备主要面对的贵重物品运输过程中的状态监控&#xff0c;比如&#xff0c;是否被打开过&#xff0c;有没有激烈碰撞&#xff0c;位置信息等。主要应用场景是医疗&#xff0c;安防等贵重物品的状态…...

Python 魔法方法介绍

在 Python 中,魔法方法(Magic Methods)是一类特殊的内置方法,它们通常以双下划线开头和结尾(例如 __init__、__str__、__add__ 等)。这些方法通常用于实现特定的语法或操作符行为,或者用于定义对象的行为。它们是 Python 面向对象编程中的一个重要特性,可以让类的行为更…...

golang time包和日期函数

1.简介 在程序中日期和时间是我们经常会用到的&#xff0c;在go中time包提供了时间的显示和测量函数。 2.获取当前时间 通过time.Now()函数获取当前时间对象&#xff0c;然后获取时间对象的年月日时分秒等值。 now : time.Now()fmt.Printf("now%v type%T\n", now…...

第7章 站在对象模型的尖端2: 异常处理

1.异常处理(Exception Handling) C的异常处理由三个主要组成部分构成&#xff1a;throw表达式、catch子句和try块。当异常被抛出时&#xff0c;程序控制权会转移&#xff0c;并且会沿着调用堆栈回溯&#xff0c;直到找到匹配的catch子句。在此过程中&#xff0c;局部对象的析构…...

不同路径——2

给定一个 m x n 的整数数组 grid。一个机器人初始位于 左上角&#xff08;即 grid[0][0]&#xff09;。机器人尝试移动到 右下角&#xff08;即 grid[m - 1][n - 1]&#xff09;。机器人每次只能向下或者向右移动一步。 网格中的障碍物和空位置分别用 1 和 0 来表示。机器人的…...

电子招采软件系统,如何实现10年可追溯审计

一、在当前经济环境下&#xff0c;中小企业面临着巨大的生存压力&#xff0c;传统产业的数字化转型迫在眉睫。AI技术为企业的低成本高效发展提供了新机会&#xff0c;混合办公成为新常态&#xff0c;数据安全法的深入落实则进一步推动企业重视数据安全。区块链存证技术凭借独特…...

TS常见内置映射类型的实现及应用场景

以下是 TypeScript 在前端项目中 常用的映射类型&#xff08;Mapped Types&#xff09;&#xff0c;结合具体场景和代码示例&#xff0c;帮助开发者高效处理复杂类型&#xff1a; 一、基础映射类型 1. Partial<T> 作用&#xff1a;将对象类型 T 的所有属性变为可选。 实…...

本地部署Deep Seek-R1,搭建个人知识库——笔记

目录 一、本地部署 DeepSeek - R1 1&#xff1a;安装Ollama 2&#xff1a;部署DeepSeek - R1模型 3&#xff1a;安装Cherry Studio 二、构建私有知识库 一、本地部署 DeepSeek - R1 1&#xff1a;安装Ollama 1.打开Ollama下载安装 未科学上网&#xff0c;I 先打开迅雷再下…...

东芝2323AMW复印机安装纸盒单元后如何添加配件选项

如何添加请看下面图示&#xff1a; 找到设备和打印机里找到打印机图标&#xff0c;右键打印机属性&#xff0c;找到配置&#xff0c;添加相应配置功能&#xff1b;打印机属性&#xff0c;加上双面或者2纸盒配件选项&#xff1b; Word打印时&#xff0c;打印机名称&#xff0c;后…...

EasyExcel动态拆分非固定列Excel表格

使用EasyExcel动态拆分非固定列Excel表格 在Excel数据解析场景中&#xff0c;​动态列结构拆分是典型挑战&#xff08;如供应链系统中不同品类的属性字段差异较大&#xff09;。传统基于POJO映射的方案无法应对列数量不固定的场景。本方案采用EasyExcel的动态模型解析和Map数据…...

开源WAF雷池本地化部署与远程查看网站安全防护的详细操作指南

文章目录 前言1.关于SafeLine2.安装Docker3.本地部署SafeLine4.使用SafeLine5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime Kuma公网地址 前言 各位建站小能手们&#xff0c;无论是想搭建个人博客、企业官网还是各种应用平台来推广自己的内容或产品&#xff0c…...

由一个话题进入DFMEA(设计失效模式及影响分析)

前言 最近看到了知乎的一个话题“为啥撞车后总是看到雨刮器在摆动&#xff1f;”&#xff0c;联想到产品设计中的一些功能安全设计&#xff0c;也借此机会学习DFMEA&#xff0c;讨论一下我个人对于DFMEA的理解。 有纰漏请指出&#xff0c;转载请说明。 学习交流请发邮件 128…...

Redisson 实现分布式锁源码浅析

大家好&#xff0c;我是此林。 今天来分享Redisson分布式锁源码。还是一样&#xff0c;我们用 问题驱动 的方式展开讲述。 1. redis 中如何使用 lua 脚本&#xff1f; Redis内置了lua解释器&#xff0c;lua脚本有两个好处&#xff1a; 1. 减少多次Redis命令的网络传输开销。…...

机试准备第17天

今天进入图论的学习。图论只考察初试学过的算法&#xff0c;一般都是模版题。常见考点有图相关的数据结构——邻接表法&#xff0c;图的遍历 BFS DFS 并查集&#xff0c;单源最短路径迪杰斯特拉。图由顶点和边构成&#xff0c;度用来说明该顶点邻接边的数量情况。权值说明了边的…...

ABAP语言的动态编程(4) - 综合案例:管理费用明细表

本篇来实现一个综合案例&#xff1a;管理费用明细表。报表在实际项目中&#xff0c;也有一定的参考意义&#xff0c;一方面展示类似的报表&#xff0c;比如管理费用、研发费用等费用的明细&#xff0c;使用业务比较习惯的展示格式&#xff1b;另一方面正好综合运用前面学习的动…...

不像人做的题————十四届蓝桥杯省赛真题解析(上)A,B,C,D题解析

题目A&#xff1a;日期统计 思路分析&#xff1a; 本题的题目比较繁琐&#xff0c;我们采用暴力加DFS剪枝的方式去做&#xff0c;我们在DFS中按照8位日期的每一个位的要求进行初步剪枝找出所有的八位子串&#xff0c;但是还是会存在19月的情况&#xff0c;为此还需要在CHECK函数…...

R语言零基础系列教程-01-R语言初识与学习路线

代码、讲义、软件回复【R语言01】获取。 R语言初识 R是一个开放的统计编程环境&#xff0c;是一门用于统计计算和作图的语言。“一切皆是对象”&#xff0c;数据、函数、运算符、环境等等都是对象。易学&#xff0c;代码像伪代码一样简洁&#xff0c;可读性高强大的统计和可视…...

即时通讯平台测试报告

1.项目概述 项目名称&#xff1a;即时通讯平台 版本号&#xff1a;V1.0.0 测试周期&#xff1a;2025年2月25日--2025年3月15日 测试目标&#xff1a;验证核心功能&#xff08;登录、注册、消息收发、用户管理、群组功能等&#xff09;的稳定性和性能指标。 2. 测试范围 功…...

蓝桥杯单片机内存爆了怎么办

蓝桥杯单片机内存爆了怎么办 文章目录 蓝桥杯单片机内存爆了怎么办一、参考文章二、内存区3、keil中的体现4、分配原则5、使用示例 一、参考文章 文章1 文章2 文章3 文章4 二、内存区 1 KB(千字节) 1024 B(字节) B代表Byte&#xff0c;1Byte8bit&#xff0c;一个字节8位 …...

一周热点:微软攻克语音输入、文本输出难题-Phi-4-multimodal

微软Phi-4-multimodal模型是人工智能领域的一个重要进展,它标志着微软在多模态人工智能技术上的突破。以下是对该模型的详细解释: 模型概述 微软Phi-4-multimodal是一个能够同时处理文本、图像和语音的多模态大型语言模型。它通过创新的架构和训练方法,实现了在不同模态之间…...

量化交易学习笔记02:双均线策略

双均线策略示例 个股&#xff1a;中国平安 回测日期&#xff1a;2022-5-1至2023-5-1 短均线&#xff1a;5天 长无线&#xff1a;10天 代码&#xff1a; def initialize(context):# 初始化此策略# 设置我们要操作的股票池, 这里我们只操作一支股票# """标的&qu…...

【WRF-Urban】使用 CGLC-MODIS-LCZ_100m 数据集运行 WRF 时的城市参数化问题

在 WRF 中,LCZ 通过 URBPARM_LCZ.TBL 进行配置,但如果 FRC_URB2D 变量缺失,WRF 会回退到默认的 URBPARM.TBL。 主要问题概述 WRF-Model-cglc-modis-lcz_100m dataset " WARNING, THE URBAN FRACTION WILL BE READ FROM URBPARM.TBL USING DEFAULT URBAN MORPHOLOGY&q…...

Selenium 自动化测试学习总结

大概了解一下即可&#xff0c;现在主要用的自动化工具是 playWright&#xff0c;它可以录制操作。 selenium是老款自动化测试工具&#xff0c;仍有很多可取之处。 安装&#xff1a; pip install selenium即可。然后下载浏览器的驱动包&#xff0c;注意不是浏览器&#xff01;…...

开源通义万相本地部署方案,文生视频、图生视频、视频生成大模型,支持消费级显卡!

开源通义万相本地部署方案&#xff0c;文生视频、图生视频、视频生成大模型&#xff0c;支持消费级显卡&#xff01; 万相2.1开源 近日&#xff0c;大模型万相2.1&#xff08;Wan&#xff09;重磅开源&#xff0c;此次开源采用Apache2.0协议&#xff0c;14B和1.3B两个参数规格…...

Suno的对手Luno:AI音乐开发「上传参考音频 - 方式一:通过二进制流的方式」 —— 「Luno Api系列|AI音乐API」第11篇

导读 今天来看下Luno Api的上传参考音频 - 方式一&#xff1a;通过二进制流的方式。 参考文件&#xff0c;主要是用于在创作的过程中&#xff0c;希望AI参考这个音乐的曲风和声音来进行创作&#xff0c;那么可以通过上传参考音乐来进行实现。 申请和使用 「已经有API的&…...

微信小程序刷题逻辑实现:技术揭秘与实践分享

页面展示&#xff1a; 概述 在当今数字化学习的浪潮中&#xff0c;微信小程序以其便捷性和实用性&#xff0c;成为了众多学习者刷题备考的得力工具。今天&#xff0c;我们就来深入剖析一个微信小程序刷题功能的实现逻辑&#xff0c;从代码层面揭开其神秘面纱。 小程序界面布局…...

巴耶赫利专业俄语外贸网站建设

巴耶赫利是专业俄语外贸网站建设与俄语搜索引擎Yandex SEO优化服务商。巴耶赫利致力于帮助中国品牌出海俄罗斯&#xff0c;打开俄罗斯市场&#xff0c;提升品牌在俄罗斯的知名度和美誉度。 以下是对巴耶赫利相关服务的详细介绍&#xff1a; 一、巴耶赫利专业俄语外贸网站建设…...

每日Attention学习25——Multi-Scale Attention Fusion

模块出处 [TCSVT 24] [link] [code] DSNet: A Novel Way to Use Atrous Convolutions in Semantic Segmentation 模块名称 Multi-Scale Attention Fusion (MSAF) 模块作用 双级特征融合 模块结构 模块思想 MSAF的主要思想是让网络根据损失学习特征权重&#xff0c;允许模型…...

前端学习记录:解决路由缓存问题

问题描述&#xff1a;响应路由参数的变化&#xff0c;使用带有参数的路由时需要注意的是&#xff0c;当用户从 /users/johnoy 导航到 /users/jolyne 时&#xff0c;相同的组件实例将会被重复使用。因为两个路由都渲染同个组件&#xff0c;比起销毁再创建&#xff0c;复用则显得…...

VSTO(C#)Excel开发10:启动和卸载顺序 事件处理 监视变化

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…...

代码随想录Day16

Day16 二叉树part06 LeetCode 530.二叉搜索树的最小绝对差 题目描述 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 输入&#xff1a;root [4,2,6,1,3] 输出&…...

第15章:ConvNeXt图像分类实战:遥感场景分类【包含本地网页部署、迁移学习】

目录 1. ConvNeXt 模型 2. 遥感场景建筑识别 2.1 数据集 2.2 训练参数 2.3 训练结果 2.4 本地部署推理 3. 下载 1. ConvNeXt 模型 ConvNeXt是一种基于卷积神经网络&#xff08;CNN&#xff09;的现代架构&#xff0c;由Facebook AI Research (FAIR) 团队在2022年提出。…...

LinuX---Shell脚本创建和执行

概述&#xff1a; 它是一个命令行解释器&#xff0c;接收应用程序/用户命令&#xff0c;然后调用操作系统内核。 Shell还是一个功能强大的编程语言&#xff0c;易编写、易调试、灵活性强。 Linux提供的Shell解析器有 atguiguubuntu:~$ cat /etc/shells # /etc/shells: valid …...

django+vue3实现前后端大文件分片下载

效果&#xff1a; 大文件分片下载支持的功能&#xff1a; 展示目标文件信息提高下载速度&#xff1a;通过并发请求多个块&#xff0c;可以更有效地利用网络带宽断点续传&#xff1a;支持暂停后从已下载部分继续&#xff0c;无需重新开始错误恢复&#xff1a;单个块下载失败只…...

KY-038 声音传感器如何工作以及如何将其与 ESP32 连接

想为您的项目赋予声音感!然后跟着做,因为在这个项目中,我们将连接一个声音传感器,用它构建一些有趣的项目。我们使用的 KY-038 声音传感器使用电容式麦克风来检测声波,这为我们提供了稳定性和可靠性的完美平衡。因此,在本文中,我们决定将 KY-038 传感器与 ESP32 连接,并…...

深入剖析二分查找的延伸:在排序数组中查找元素的第一个和最后一个位置

深入剖析二分查找的延伸&#xff1a;在排序数组中查找元素的第一个和最后一个位置 引言 二分查找&#xff0c;作为算法界的“常青树”&#xff0c;以其高效性和简洁性备受青睐。然而&#xff0c;许多初学者仅限于使用它查找单个元素&#xff0c;而对其进阶应用知之甚少。今天…...

UE5中 Character、PlayerController、PlayerState、GameMode和GameState核心类之间的联动和分工·

1. GameMode 与 GameState 关系描述 GameMode&#xff1a;定义游戏规则和逻辑&#xff0c;控制游戏的开始、进行和结束。GameState&#xff1a;存储和同步全局游戏状态&#xff0c;如得分、时间、胜利条件等。 联动方式 GameMode初始化GameState&#xff1a;GameMode在游戏…...

使用Python获取并操作1688自定义API接口

在电子商务领域&#xff0c;1688作为国内领先的B2B平台&#xff0c;提供了丰富的API接口&#xff0c;允许开发者获取商品信息、店铺信息等。其中&#xff0c;custom接口允许开发者进行自定义操作&#xff0c;获取特定的数据。本文将详细介绍如何使用Python调用1688的custom接口…...

【AI】现代人工智能技术的应用与发展

引言 人工智能&#xff08;AI&#xff09;已经深入到我们生活的各个方面&#xff0c;涉及医疗、教育、交通、金融等众多领域。随着技术的不断发展&#xff0c;AI的应用和潜力也变得愈加广泛。本文将详细介绍人工智能的应用领域&#xff0c;探讨未来的发展趋势&#xff0c;并通…...

小程序渲染之谜:如何解决“加载中...”不消失的 Bug(glass-easel)

&#x1f389; 小程序渲染之谜&#xff1a;如何解决“加载中…”不消失的 Bug &#x1f389; 引言 在小程序开发中&#xff0c;渲染问题总能让人抓狂。&#x1f62b; 这次&#xff0c;我遇到了一个奇怪的 bug&#xff1a;产品详情页的内容已经正常显示&#xff0c;但页面却一…...

C语言结构体全面解析 | 从入门到精通

&#x1f4da; C语言结构体全面解析 | 从入门到精通 整理&#xff1a;算法练习生| 转载请注明出处 &#x1f4d1; 目录 结构体的定义与使用结构体变量的参数传递结构体数组结构体指针typedef关键字结构体初始化 1️⃣ 结构体的定义与使用 为什么需要结构体&#xff1f; 当…...

Trae与Builder模式初体验

说明 下载的国际版&#xff1a;https://www.trae.ai/ 建议 要选新模型 效果 还是挺不错的&#xff0c;遇到问题反馈一下&#xff0c;AI就帮忙解决了&#xff0c;真是动动嘴&#xff08;打打字就行了&#xff09;&#xff0c;做些小的原型效果或演示Demo很方便呀&#xff…...

麒麟服务器操作系统QT系列软件工具手册

QtCreator****功能介绍 QtCreator 概述 Qt Creator是跨平台的 Qt IDE, Qt Creator 是 Qt 被 [Nokia](https://baike.baidu.com/item/Nokia/264012" /t “_blank) 收购后推出的一款新的轻量级[集成开发环境](https://baike.baidu.com/item/集成开发环境/298524” /t “_…...

【HeadFirst系列之HeadFirstJava】第18天之深入理解原型模式:从问题到解决方案(含 Java 代码示例)

深入理解原型模式&#xff1a;从问题到解决方案&#xff08;含 Java 代码示例&#xff09; 在软件开发中&#xff0c;我们经常需要创建对象&#xff0c;而有些对象的创建成本较高或者结构较为复杂。如何在不破坏封装的前提下&#xff0c;高效地创建对象&#xff1f; 这正是**原…...

JetsonOrin源码安装部署PaddlePaddle

Jetson Orin 源码安装部署Paddle 部署环境 系统架构: Arm CUDA: 11.4 cmake: 3.18.0 python:3.8 注意环境中的版本问题&#xff0c;之前装onnxruntime的时候cmake被升级到了3.31.0&#xff0c;但是编译Paddle时会报错&#xff0c;因此特意降级回了官方推荐的3.18.0 具体环…...