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

uniapp h5 touch事件踩坑记录

news 2025/7/3 23:33:22

场景：悬浮球功能

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/6/26 0:39:04

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/6/20 11:13:34

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/6/21 13:46:23

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/6/21 1:38:52

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/6/29 16:01:11

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

编程新知 2025/6/17 18:25:04

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/6/15 13:15:33

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2025/6/30 13:23:52