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

uniapp h5 touch事件踩坑记录

news 2026/2/10 20:04:43

场景：悬浮球功能

当我给悬浮球设置了 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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/8 22:07:52

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2026/1/19 6:41:37