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

uniapp h5 touch事件踩坑记录

news 文章来源：https://blog.csdn.net/m0_57033755/article/details/137118855 2024/11/16 13:35:01

场景：悬浮球功能

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

通过 Docker 搭建 BookStack

文章目录 环境说明1、官方网站2、通过 Docker 部署总结 环境说明 操作系统版本&#xff1a;CentOS Linux release 7.9.2009 (Core) Docker 版本&#xff1a;Docker Engine - Community 24.0.2 BookStack 版本&#xff1a;23.02.3 MySQL 版本&#xff1a;8.0.32 1、官方网站 G…...

编程日记 2024/3/31 22:49:08

通俗易懂：什么是Java虚拟机（JVM）？它的主要作用是什么？

Java虚拟机&#xff08;Java Virtual Machine, JVM&#xff09;是一种软件实现的抽象计算机&#xff0c;它负责执行Java字节码&#xff08;Bytecode&#xff09;。Java程序并不是直接在物理计算机上运行&#xff0c;而是先由Java编译器将源代码编译成与平台无关的字节码&#x…...

编程日记 2024/3/31 22:47:05

[k8s] kubectl执行失败后等待一段时间再重试 (Shell实现)

使用Shell脚本实现功能&#xff1a; kubectl执行失败后&#xff0c;等待30秒后再重试&#xff0c;一共重试3次&#xff0c;代码如下&#xff1a; #!/bin/bashKUBECTL_BIN/var/lib/snapd/snap/bin/kubectlERR_MSG_K8S_NOTRUNNING"microk8s is not running" ERR_MSG_C…...

编程日记 2024/3/31 22:44:02

java中的static和单例模式

同一个类中&#xff0c;访问其类成员&#xff0c;可以省略类名不写 static&#xff1a;叫静态&#xff0c;可以修饰成员变量&#xff0c;成员方法。 成员变量按照有无static修饰&#xff0c;分为两种&#xff1a; 类变量&#xff1a;有static修饰&#xff0c;属于类&#xf…...

编程日记 2024/3/31 22:43:00

RabbitMQ相关总结

Broker 异步调用中用Broker进行事件订阅和调用&#xff0c;完成解耦 没有强依赖&#xff0c;不用担心级联失败 流量削峰 MQ 的下载 1.可以使用命令拉取镜像 docker pull rabbitmq:3-management 2.也可以直接去官网下载tar包&#xff0c;然后上传到虚拟机上面 spring AMQP…...

编程日记 2024/3/31 22:39:57

RAFT: Adapting Language Model to Domain Specific RAG

今天来介绍下伯克利大学3.15日新发的一篇paper，RAFT: Adapting Language Model to Domain Specific RAG 主要研究了如何构造训练数据来微调你的LLM，从而在LLM在垂直领域的RAG中表现更好。并且开源了代码：GitHub - ShishirPatil/gorilla: Gorilla: An API store for LLMs 主…...

编程日记 2024/3/31 22:37:55

第十五届蓝桥杯第三期模拟赛第十题 ← 上楼梯

【问题描述】 小蓝要上一个楼梯&#xff0c;楼梯共有 n 级台阶&#xff08;即小蓝总共要走 n 级&#xff09;。小蓝每一步可以走 a 级、b 级或 c 级台阶。 请问小蓝总共有多少种方案能正好走到楼梯顶端&#xff1f;【输入格式】 输入的第一行包含一个整数 n 。 第二行包含三个整…...

编程日记 2024/3/31 22:34:52

第四题：星期一

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 整个 20 世纪&#xff08;1901 年 1 月 1 日至 2000 年 12 月 31 日之间&#xff09;&#xff0c;一共有多少个星期一&#xff1f;(不要告诉我你不知道今天是星期几…...

编程日记 2024/3/31 22:33:51

Mamba: Linear-Time Sequence Modeling with Selective State Spaces(论文笔记)

What can I say? 2024年我还能说什么&#xff1f; Mamba out! 曼巴出来了&#xff01; 原文链接&#xff1a; [2312.00752] Mamba: Linear-Time Sequence Modeling with Selective State Spaces (arxiv.org) 原文笔记&#xff1a; What&#xff1a; Mamba: Linear-Time …...

编程日记 2024/3/31 22:29:47

2024蓝桥杯每日一题（区间DP）

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;游戏 试题二&#xff1a;石子合并 试题三&#xff1a;密码脱落 试题四&#xff1a;能量项链 试题一&#xff1a;游戏 【题目描述】 玩家一和玩家二共同玩一个小游戏。给定一个包含 N 个…...

编程日记 2024/3/31 22:24:44

做网站需要多少钱呢/迅雷bt磁力链 最好用的搜索引擎

前端应用在不断壮大的过程中&#xff0c;内部模块间的依赖可能也会随之越来越复杂&#xff0c;模块间的 低复用性 导致应用 难以维护&#xff0c;不过我们可以借助计算机领域的一些优秀的编程理念来一定程度上解决这些问题&#xff0c;接下来要讲述的 IoC 就是其中之一。什么是…...

编程日记 2024/11/16 12:02:29

专业型企业网站有哪些/广东网站营销seo费用

传送门 分析 从1道m进行匹配&#xff0c;找到第一个不能继续匹配的点即可 代码 #include<iostream> #include<cstdio> #include<cstring> #include<string> #include<algorithm> #include<cctype> #include<cmath> #include<cstd…...

编程日记 2024/11/16 11:06:07

沧州哪家做网站好/营销策划方案怎么做

默认插槽&#xff1a; 父组件中&#xff1a;<Category><div>html结构1</div></Category>子组件中&#xff1a;<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div></template>具名插槽&a…...

编程日记 2024/11/16 7:46:55

有没有什么专门做兼职的网站/广州各区最新动态

是的&#xff0c;Amazon Fine Foods 评论数据集可以用于社交网络分析。如果要根据这个数据集来构建网络&#xff0c;可以将数据集中的用户作为网络的节点。如果要更细粒度地构建网络&#xff0c;可以将每一条评论作为一个节点&#xff0c;并将用户之间的关系用边来表示。例如&a…...

编程日记 2024/11/16 4:58:46

塘沽网站建设/深圳网络广告推广公司

在 开发Maven 项目的时候&#xff0c;会发现个问题&#xff0c;就是下载下来的项目默认 compiler 为1.5 &#xff0c;项目报错。 明明之前开发用的是1.7的啊。 这里只需要在pom.xml确定下就好了。 <properties><project.build.sourceEncoding>UTF-8</project.bu…...

编程日记 2024/11/16 4:34:15

怎么找回网站后台密码/实体店铺引流推广方法

闲话不多说&#xff0c;用到vue的童鞋们应该大部分都会遇到请求中的各种奇葩问题&#xff0c;昨天研究一天&#xff0c;终于搞出来个所以然了&#xff0c;写篇文章拯救一下广大的童鞋们&#xff0c;某度娘当然也可以搜到&#xff0c;但一般解决了一个问题后就会出现另外一个问题…...

编程日记 2024/11/16 0:00:48