uniapp h5 touch事件踩坑记录

场景:悬浮球功能

当我给悬浮球设置了 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那么就要注意参照物究竟是哪一个!

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/777881.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA使用POI实现Excel单元格合并-02

JAVA使用POI实现Excel单元格合并 实现效果 解释&#xff1a;只要是遇见与前一行相同的数据就合并 引入jar <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.2</version></depe…

OpenHarmony实战开发-使用ArkTS语言实现简易视频播放器

介绍 本篇Codelab使用ArkTS语言实现视频播放器&#xff0c;主要包括主界面和视频播放界面&#xff0c;我们将一起完成以下功能&#xff1a; 主界面顶部使用Swiper组件实现视频海报轮播。主界面下方使用List组件实现视频列表。播放界面使用Video组件实现视频播放。在不使用视频…

广场舞团系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. 系…

dubbo负载均衡策略有哪些

1、随机策略&#xff08;Random Load Balance&#xff09;&#xff1a;随机选择一个可用的服务提供者进行调用。 2、轮询策略&#xff08;Round Robin Load Balance&#xff09;&#xff1a;按照顺序依次选择可用的服务提供者进行调用。 3、加权轮询策略&#xff08;Weighted…

MySQL进阶-----索引的语法与SQL性能分析

目录 前言 一、索引语法 1.SQL语法 2.案例演示 二、SQL性能分析 三、慢查询日志 1.开启日志 2.测试样例 四、profile详情 1.开启profile 2.profile测试SQL语句 五、explain详情 1.语法结构 2.执行顺序示例&#xff08;id&#xff09; 3.执行性能示例(type) 前言 本…

如何利用opencv进行图像视角角度变换

要将45度拍摄的图片变换成正面拍摄视角&#xff0c;您可以使用OpenCV库中的仿射变换&#xff08;Affine Transformation&#xff09;。仿射变换可以用于图像的几何变换&#xff0c;如旋转、缩放、平移和倾斜等。在这种情况下&#xff0c;您需要找到图像中的一些特征点&#xff…

记录pycharm配置Anaconda环境时没有反应的问题

记录pycharm配置Anaconda环境时没有反应的问题 背景 下载最新pycharm后在设置中配置add interpreter Anaconda环境时&#xff0c;x选中conda.ba文件点击Load Enviroments后&#xff0c;没有反应&#xff0c;就闪了一下&#xff0c;也有添加成功 探索路程 试过了重启&#x…

Debian GNU/Linux 安装docker与docker compose

安装 Docker 更新包列表 sudo apt update 安装必要的软件包&#xff0c;以便让 APT 可以通过 HTTPS 使用存储库&#xff1a; sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common 添加 Docker 的官方 GPG 密钥&#xff1a; cu…

OceanBase 重启方法

OceanBase服务 使用obd重启 查看OB服务名 adminserver070 oceanbase-ce]$ obd cluster list -------------------------------------------------------- | Cluster List | ----------------------------------------------------…

Vue 04 Vue 中的 Ajax、slot 插槽

Vue学习 Vue 0401 Vue中的Ajax服务器准备axios使用跨域问题解决Vue-CLI 配置代理1Vue-CLI 配置代理2案例: 用户搜索vue-resource 02 slot插槽默认插槽具名插槽作用域插槽slot总结 Vue 04 B站 Vue全家桶&#xff08;BV1Zy4y1K7SH&#xff09; 学习笔记 Vue 中的 ajax 01 Vue中的…

【动态规划】斐波那契数列模型

【动态规划】斐波那契数列模型 文章目录 【动态规划】斐波那契数列模型前言一、第 N 个泰波那契数二、三步问题三、使用最小花费爬楼梯四、解码方法总结 前言 ​ 我们将深入探讨解决斐波那契数列模型相关问题的解决方法。通过一系列精心挑选的例题&#xff0c;我们将展示如何运…

Excel:使用VLOOKUP函数,抓取指定数据,后一个列

Excel:使用VLOOKUP函数&#xff0c;抓取指定数据&#xff0c;后一个列 我们有这样一个数据源 要是实现这个页面的赋值 就是对应关系映射 使用 VLOOKUP(A2,Sheet2!$A$2:$B$9,2,FALSE)第一个参数是需要匹配的单元格。 第二个参数是数据源&#xff0c;我这里数据源用的是shee…

Unity 打开外部程序的方法

在Unity中打开外部程序可以使用System.Diagnostics.Process类。 1、编写控制脚本&#xff1a; using System.Collections; using System.Collections.Generic; using System.Diagnostics; using UnityEngine;public class OpenExternalProgram : MonoBehaviour {public strin…

spring boot actuator 安全配置 springboot的安全性

关于springboot Actuator框架的安全配置方案&#xff1a; 加入security安全验证框架 方案一&#xff1a; 配置信息&#xff1a; spring:security:user:password: adminname: adminmanagement:endpoints:web:base-path: /monitorexposure:include: "*"# 排除端点e…

大语言模型中的强化学习与迁移学习技术

文章目录 大语言模型中的强化学习与迁移学习技术大语言模型常用的训练方法主要包括以下几种强化学习在大语言模型中的作用与意义迁移学习在大语言模型中的作用与意义异同强化学习在大语言模型中的具体技术:迁移学习在大语言模型中的具体技术:Agent与Agent框架基于大语言模型预…

Unity图集编辑器

图集编辑器 欢迎使用图集编辑器新的改变编辑器图片 欢迎使用图集编辑器 Unity图集操作很是费劲 无法批量删除和添加图集中的图片 新的改变 自己写了一个图集编辑器 客&#xff1a; 支持批量删除 左键点击图片代表选中 右键点击图标定位到资产支持批量添加 选中图片拖拽到编…

python统计分析——单样本均值检验

参考资料&#xff1a;python统计分析【托马斯】 1、单样本均值的t检验 检验一个正态分布数据的均值和一个参考值的差异&#xff0c;我们一般使用单样本t检验&#xff0c;该检验基于t分布。 如果我们知道一个正态分布总体的均值和标准差&#xff0c;那么我们可以计算对应的标准…

CMOS逻辑门电路

按照制造门电路的三极管不同&#xff0c;分为MOS型、双极性和混合型。MOS型集成逻辑门有CMOS、NMOS、PMOS&#xff1b;双极型逻辑门有TTL&#xff1b;混合型有BiCMOS。 CMOS门电路是目前使用最为广泛、占主导地位的集成电路。早期CMOS电路速度慢、功耗低&#xff0c;后来随着制…

Rust教程:How to Rust-基本类型

专栏简介 本专栏是优质Rust技术专栏&#xff0c;推荐精通一门技术栈的蟹友&#xff0c;不建议完全无计算机基础的同学 感谢Rust圣经开源社区的同学&#xff0c;为后来者提供了非常优秀的Rust学习资源 本文使用&#xff1a; 操作系统macOS Sonoma 14 / Apple M1编译器&#…

ubuntu编译OpenCV and seetaFace2

opencv opencv-4.5.2 opencv_contrib-4.5.2 SeetaFace2 SeetaFace2-master https://github.com/seetafaceengine 指定安装目录&#xff0c;和OpenCV放一个目录下了 安装前 安装 安装后 Qt安装 Windows下 Linux下 报错1 原因&#xff1a; 报错…