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

uniapp h5 touch事件踩坑记录

news 2026/3/27 23:10:58

场景：悬浮球功能

当我给悬浮球设置了 position: fixed;  然后监听悬浮球的touch事件，从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。当直接赋值后效果应该是这样子：

注意鼠标相对悬浮球的位置，应该就是左上角，因为left和top属性是从左上角作为起点的。但是当运行在h5页面中就是这样子：

 可以看到x轴没问题但是y轴位置明显不对。最后发现隐藏title后和不隐藏title获取的clientY值是不一样的，测试后发现如果加了title，那么clientY是从tite底部开始为0计算的。但是悬浮球top是按照是浏览器视口顶部开始计算的，这就是为什么悬浮球比正常位置靠上的原因！！！这里注意下图发现uniapp在我的悬浮球的祖先元素设置了定位，这个设置定位的祖先刚好是title的底部，那么就有同学疑问，那么不应该悬浮球也top为0的位置也是tite底部吗，答案是我设置的fixed，固定定位永远相对于浏览器视口。这个也是个坑，如果设置不是fixed那么就要注意参照物究竟是哪一个！

知道了这个问题那么就很好解决了。这里就不贴啦，有很多解决办法，难不倒各位程序猿！！ 

相关文章：

uniapp h5 touch事件踩坑记录

场景：悬浮球功能 当我给悬浮球设置了 position: fixed; 然后监听悬浮球的touch事件，从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。当直接赋值后效果应该是这样子： 注意鼠标相对悬浮球的位置，应该就是左上角&a…...

编程日记 2024/3/31 23:44:04

webpack.prod.js（webpack生产环境配置文件）

生产环境：只打包不运行本地服务器 对于在config目录下的webpack.prod.js 1.在根目录下运行 npx webpack --config ./config/webpack.prod.js 2.在package.json文件中配置 "build":"npx webpack --config ./config/webpack.prod.js" const …...

编程日记 2024/3/31 23:43:03

利用python做模拟数据（测试数据），连接数据库和服务器接口,涉及雪花id服务

import datetime import jsonimport pymysql import requests import snowflake.client from faker import Faker#cmd启动snowflake服务： #snowflake_start_server --addresslocalhost --port8910 --dc1 --worker1 def create_testers():# 创建一个中文Faker实例fak…...

编程日记 2024/3/31 23:41:01

大模型日报2024-03-30

大模型资讯 提升大型语言模型推理速度：高效部署技术 摘要: 随着GPT-4、LLaMA和PaLM等大型语言模型（LLMs）不断拓展自然语言处理的边界，研究人员正在探索加速这些模型推理过程的技术。这些技术旨在提高模型部署的效率，以…...

编程日记 2024/3/31 23:39:58

【ARM 嵌入式 C 入门及渐进 14 -- C 代码中取余与取模的使用介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 背景示例 背景 有些文件每行是固定的字符个数，那么如果任意给个字符的序号，怎么通过C 代码获取该字符所在的行呢？ 处理这个问题就要用到 C 语言中的取余和取模运算了。 示例 在 C 语言中&…...

编程日记 2024/3/31 23:37:57

C++入门知识详细讲解

C入门知识详细讲解 1. C简介1.1 什么是C1.2 C的发展史1.3. C的重要性1.3.1 语言的使用广泛度1.3.2 在工作领域 2. C基本语法知识2.1. C关键字(C98)2.2. 命名空间2.2 命名空间使用2.2 命名空间使用 2.3. C输入&输出2.4. 缺省参数2.4.1 缺省参数概念2.4.2 缺省参数分类 2.5. …...

编程日记 2024/3/31 23:36:56

pytorch中的torch.hub.load()：以vggish为例

pytorch提供了torch.hub.load()函数加载模型，该方法可以从网上直接下载模型或是从本地加载模型。官方文档 torch.hub.load(repo_or_dir, model, *args, sourcegithub, trust_repoNone, force_reloadFalse, verboseTrue, skip_validationFalse, **kwargs)参数说明&a…...

编程日记 2024/3/31 23:34:53

mysql 用户管理-权限管理

学习了用户管理，再学习下权限管理。 3，权限管理 权限管理主要是对登录到MySQL的用户进行权限验证。所有用户的权限都存储在MySQL的权限表中，不合理的权限规划会给MySQL服务器带来安全隐患。数据库管理员要对所有用户的权限进行合理规…...

编程日记 2024/3/31 23:32:52

RabbitMQ--04--发布订阅模式 (fanout)-案例

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 发布订阅模式 (fanout)---案例前言RabbitListener和RabbitHandler的使用 1.通过Spring官网快速创建一个RabbitMQ的生产者项目2.导入项目后在application.yml文件中配…...

编程日记 2024/3/31 23:27:48

基于java+SpringBoot+Vue的网上书城管理系统设计与实现

基于javaSpringBootVue的网上书城管理系统设计与实现 开发语言: Java 数据库: MySQL技术: SpringBoot MyBatis工具: IDEA/Eclipse、Navicat、Maven 系统展示 前台展示 后台展示 系统简介 整体功能包含： 网上书城管理系统是一个基于互联网的在线购书平台&#…...

编程日记 2024/3/31 23:26:47

PCL点云处理之M估计样本一致性（MSAC）平面拟合（二百三十六）

PCL点云处理之M估计样本一致性（MSAC）平面拟合（二百三十五六） 一、算法介绍二、使用步骤1.代码2.效果一、算法介绍 写论文当然用RANSAC的优化变种算法MSAC啊，RANSAC太土太LOW了哈哈 MSAC算法（M-estimator Sample Consensus）是RANSAC（Random Sample Consensus）的一种…...

编程日记 2024/3/31 23:18:40

通过WSL在阿里云上部署Vue项目

参考： 阿里云上搭建网站-CSDN博客 云服务器重装 关闭当前运行实例 更换操作系统，还有其他的进入方式。 选择ubuntu系统（和WSL使用相同的系统）。 设置用户和密码。发送短信验证码。 新系统更新。秒速干净的新系统设置完成。 这…...

编程日记 2024/3/31 23:17:39

240330-大模型资源-使用教程-部署方式-部分笔记

A. 大模型资源 Models - Hugging FaceHF-Mirror - Huggingface 镜像站模型库首页 魔搭社区 B. 使用教程 HuggingFace HuggingFace 10分钟快速入门（一），利用Transformers，Pipeline探索AI。_哔哩哔哩_bilibiliHuggingFace快速入…...

编程日记 2024/3/31 23:16:38

uni-app 富文本编辑器

<template><view class"container"><view>标题&#xff1a;<u-input placeholder"请输入标题"></u-input></view><view class"page-body"><view classwrapper><view classtoolbar tap"…...

编程日记 2024/3/31 23:12:34

3D汽车模型线上三维互动展示提供视觉盛宴

VR全景虚拟看车软件正在引领汽车展览行业迈向一个全新的时代&#xff0c;它不仅颠覆了传统展览的局限&#xff0c;还为参展者提供了前所未有的高效、便捷和互动体验。借助于尖端的vr虚拟现实技术、逼真的web3d开发、先进的云计算能力以及强大的大数据处理&#xff0c;这一在线展…...

编程日记 2024/3/31 23:06:29

如何在Flutter中进行网络请求？

Hello&#xff01;大家好&#xff0c;我是咕噜铁蛋&#xff0c;你们的好朋友&#xff01;今天&#xff0c;我想和大家分享一下在Flutter中如何进行网络请求。Flutter作为一个跨平台的开发框架&#xff0c;网络请求是其实现数据交互的重要一环。下面&#xff0c;我将详细介绍几种…...

编程日记 2024/3/31 23:05:27

node：ReferenceError: XMLHttpRequest is not defined

node&#xff1a;ReferenceError: XMLHttpRequest is not defined 1 前言 node执行如下代码&#xff1a; new XMLHttpRequest()报错提示&#xff1a;ReferenceError: XMLHttpRequest is not defined 2 解决 2.1 可能原因是没有安装xmlhttprequest npm install xmlhttpreq…...

编程日记 2024/3/31 23:03:24

PHP定时任务框架taskPHP3.0的学习记录1（TaskPHP、执行任务类的实操代码实例）

TaskPHP是一个基于PHP的定时任务框架&#xff0c;它提供了一个简单、灵活且易于使用的解决方案&#xff0c;用于在PHP环境中执行定时任务。下面是对TaskPHP框架的简要介绍&#xff1a; 简单易用&#xff1a;TaskPHP的设计目标是让定时任务的创建和管理变得简单。通过简单的配置…...

编程日记 2024/3/31 22:56:15

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

电动两轮车不仅为当今生活提供了便利&#xff0c;更是一种健康和绿色的出行方式。想象一下&#xff0c;在经过一整晚的充分休息&#xff0c;骑上爱车&#xff0c;满血复活的准备开始新的一天。您会愿意带着如何给心爱的两轮车充电的担心开始这一天吗&#xff1f; 随着越来越…...

编程日记 2024/3/31 22:54:13

动态规划-----背包类问题（0-1背包与完全背包）详解

目录 什么是背包问题&#xff1f; 动态规划问题的一般解决办法&#xff1a; 0-1背包问题&#xff1a; 0 - 1背包类问题 分割等和子集&#xff1a; 完全背包问题&#xff1a; 完全背包类问题 零钱兑换II: 什么是背包问题&#xff1f; 背包问题(Knapsack problem)是一种…...

编程日记 2024/3/31 22:53:11

Realtek RTL8125 2.5GbE网卡驱动安装与优化全指南：从识别到调优的完整解决方案

Realtek RTL8125 2.5GbE网卡驱动安装与优化全指南&#xff1a;从识别到调优的完整解决方案 【免费下载链接】realtek-r8125-dkms A DKMS package for easy use of Realtek r8125 driver, which supports 2.5 GbE. 项目地址: https://gitcode.com/gh_mirrors/re/realtek-r8125…...

编程新知 2026/3/27 20:25:32

深入解析：高级 Android 开发工程师职位与面试全攻略

引言：移动互联网时代的核心力量 在当今移动互联网蓬勃发展的时代，智能手机已成为人们日常生活中不可或缺的一部分。作为连接用户与数字服务的桥梁，移动应用扮演着至关重要的角色。而在移动应用的生态中，Android 系统凭借其开放性和庞大的用户基础，占据了全球移动操作系统…...

编程新知 2026/3/27 19:24:53

小米智能家居集成终极指南：5分钟快速接入HomeAssistant

小米智能家居集成终极指南&#xff1a;5分钟快速接入HomeAssistant 【免费下载链接】hass-xiaomi-miot Automatic integrate all Xiaomi devices to HomeAssistant via miot-spec, support Wi-Fi, BLE, ZigBee devices. 小米米家智能家居设备接入Hass集成 项目地址: https://…...

编程新知 2026/3/27 19:16:51

HunyuanVideo-Foley保姆级教程：从零部署到音效生成的5个关键步骤

HunyuanVideo-Foley保姆级教程&#xff1a;从零部署到音效生成的5个关键步骤 1. 环境准备与镜像部署 1.1 硬件要求检查 在开始部署前&#xff0c;请确保您的设备满足以下最低配置要求&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090/4090D&#xff08;24GB显存&#xff09;内…...

编程新知 2026/3/27 18:50:39

企业级流程建模前端架构：基于Vite+Vue3的低代码解决方案

企业级流程建模前端架构&#xff1a;基于ViteVue3的低代码解决方案 【免费下载链接】vite-vue-bpmn-process 基于 Vite TypeScript Vue3 NaiveUI Bpmn.js 的流程编辑器&#xff08;前端部分&#xff09;。支持高度自定义&#x1f680;&#x1f680;&#x1f680;。Vue 2 版本…...

编程新知 2026/3/27 18:44:37

OpenClaw任务编排：GLM-4.7-Flash多步骤自动化设计

OpenClaw任务编排&#xff1a;GLM-4.7-Flash多步骤自动化设计 1. 为什么需要任务编排 上周我需要整理一批技术文档&#xff0c;这个任务包含多个步骤&#xff1a;从不同文件夹收集Markdown文件、统一格式、生成摘要、最后打包发送给团队成员。手动操作不仅耗时&#xff0c;还…...

编程新知 2026/3/27 18:28:32

如何一键完成飞书文档格式转换：3种高效迁移方法指南

如何一键完成飞书文档格式转换&#xff1a;3种高效迁移方法指南 【免费下载链接】feishu2md 一键命令下载飞书文档为 Markdown 项目地址: https://gitcode.com/gh_mirrors/fe/feishu2md 想要将飞书文档快速转换为Markdown格式吗&#xff1f;feishu2md项目为您提供了一键…...

编程新知 2026/3/27 17:52:04

答辩 PPT 不用熬！PaperXie AI PPT 让毕业论文答辩赢在 “门面”

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/ppt/createhttps://www.paperxie.cn/ppt/create 又到毕业冲刺季&#xff0c;当论文终于敲下最后一个句号&#xff0c;毕业论文答辩 PPT却成了新的 “熬夜重灾区”&#xff1a…...

编程新知 2026/3/27 17:31:57

Vue 2 中文文档：跨越语言鸿沟的技术民主化之旅

Vue 2 中文文档&#xff1a;跨越语言鸿沟的技术民主化之旅 【免费下载链接】v2.cn.vuejs.org &#x1f1e8;&#x1f1f3; Chinese translation for v2.vuejs.org 项目地址: https://gitcode.com/gh_mirrors/v2c/v2.cn.vuejs.org 你是否曾因语言障碍而错失了优秀技术框架…...

编程新知 2026/3/27 17:27:57

Taskbar-Lyrics：Windows 11任务栏歌词嵌入终极指南

Taskbar-Lyrics&#xff1a;Windows 11任务栏歌词嵌入终极指南 【免费下载链接】Taskbar-Lyrics BetterNCM插件&#xff0c;在任务栏上嵌入歌词&#xff0c;目前仅建议Windows 11 项目地址: https://gitcode.com/gh_mirrors/ta/Taskbar-Lyrics 在Windows 11上享受沉浸式…...

编程新知 2026/3/27 16:45:32