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

UniApp一句话经验: px -> rpx动态转换和动态元素区域的获取

px->rpx转换


在多终端条件下,什么devicePixelRatio,upx2px都是不靠谱的,最直接的是这样:

const { screenWidth } = uni.getSystemInfoSync()const pixelUnit = screenWidth / 750 // rpx->px比例基数

动态元素区域获取

多终端条件下,这样写兼容性高

export const getRect: (selector: string,selectAll: boolean,instance?: any
) => Promise<UniApp.NodeInfo | UniApp.NodeInfo[]> = (selector, selectAll = false, instance) => {// 注意非onMount和onReady时需要传入instance,可以通过getCurrentInstance()先获得return new Promise<UniApp.NodeInfo | UniApp.NodeInfo[]>((resolve) => {const query = instance? uni.createSelectorQuery().in(instance): uni.createSelectorQuery().in(getCurrentInstance())const view = selectAll ? query.selectAll(selector) : query.select(selector)view.fields({size: true,rect: true,scrollOffset: true},(res) => {resolve(res)}).exec()})
}

使用css选择器标记节点:动态节点建议用class,例如:

  const rect: UniApp.NodeInfo = await utils.getRect('.square-area')

  console.log('rect: ', rect)

注意这里获得的是px,如果要转化为rpx计算请参考前面的方式获取转换比例单位


文章内容太少,被搜索引擎所不齿。简单有用的知识不用繁文缛节

相关文章:

UniApp一句话经验: px -> rpx动态转换和动态元素区域的获取

px->rpx转换 在多终端条件下&#xff0c;什么devicePixelRatio&#xff0c;upx2px都是不靠谱的&#xff0c;最直接的是这样&#xff1a; const { screenWidth } uni.getSystemInfoSync()const pixelUnit screenWidth / 750 // rpx->px比例基数 动态元素区域获取 多终…...

Python基于flask框架的智能停车场车位系统 数据可视化分析系统fyfc81

目录 技术栈和环境说明解决的思路具体实现截图系统设计python语言django框架介绍flask框架介绍性能/安全/负载方面可行性分析论证python-flask核心代码部分展示python-django核心代码部分展示技术路线操作可行性详细视频演示源码获取 技术栈和环境说明 结合用户的使用需求&…...

海外服务器哪个速度最快且性能稳定

海外服务器的速度与性能稳定性受多种因素影响&#xff0c;包括地理位置、网络架构、基础设施质量以及用户网络路径等。在众多选择中&#xff0c;几个特定地区的服务器因其卓越表现而备受推崇。 首先&#xff0c;美国硅谷(加利福尼亚州)与纽约的服务器以其技术领先、网络连接稳定…...

C/C++通过CLion2024进行Linux远程开发保姆级教学

目前来说&#xff0c;对Linux远程开发支持相对比较好的也就是Clion和VSCode了&#xff0c;这两个其实对于C和C语言开发都很友好&#xff0c;大可不必过于纠结使用那个&#xff0c;至于VS和QtCreator&#xff0c;前者太过重量级了&#xff0c;后者更是不用说&#xff0c;主要用于…...

工程师 - 如何安装Windows 终端

Windows 终端是一款适用于 Windows 的现代命令行应用程序&#xff0c;支持多个终端会话&#xff0c;包括 Command Prompt、PowerShell 和 Windows Subsystem for Linux (WSL)。它具有标签式界面、可定制的设置&#xff08;如主题和按键绑定&#xff09;、改进的文本渲染以及对 …...

UniApp 从Vue2升级为Vue3需要注意哪些方面

Vue官方已经发布了Vue3&#xff0c;Vue2不再维护&#xff0c;也在建议大家都迁移到Vue3&#xff0c;所以Vue2终会被淘汰。 那么UniApp 从Vue2升级为Vue3需要注意哪些方面&#xff1a; 1、main.js 下面请看创建应用实例Vue2与Vue3的不同&#xff1a; Vue2的写法&#xff1a;…...

前端面试CSS常见题目

1. CSS 选择器的优先级 (Specificity) 面试官通常会问你如何计算 CSS 选择器的优先级&#xff0c;这对于避免样式冲突、提高代码可维护性很重要。 优先级计算规则&#xff1a; !important 优先级最高。内联样式&#xff08;例如&#xff1a;<div style"color: red;&…...

408算法题leetcode--第10天

643. 子数组最大平均数 I 643. 子数组最大平均数 I思路&#xff1a;滑动窗口时间&#xff1a;O(n)&#xff1b;空间&#xff1a;O(1) class Solution { public:double findMaxAverage(vector<int>& nums, int k) {double ret 0, temp 0;size_t size nums.size()…...

13年计算机考研408-数据结构

解析&#xff1a; 这个降序链表不影响时间复杂度&#xff0c;因为是链表&#xff0c;所以你想要升序就使用头插法&#xff0c;你想要降序就使用尾插法。 然后我们来分析一下最坏的情况是什么样的。 因为m和n都是两个有序的升序序列。 如果刚好m的最大值小于n的最小值&#xff0…...

跨平台开发新视角:利用Android WebView实现Web内容的原生体验

在移动应用开发领域&#xff0c;跨平台解决方案一直是一个热门话题。开发者们不断寻求能够同时在iOS和Android平台上提供一致用户体验的方法。而Android的WebView组件&#xff0c;作为一个强大的工具&#xff0c;允许开发者在Android应用中嵌入Web内容&#xff0c;为用户提供接…...

Stable Diffusion 使用详解(11)--- 场景ICON制作

目录 背景 controlNet 整体描述 Canny Lineart Depth 实际使用 AI绘制需求 绘制过程 PS打底 场景模型选择 设置提示词及绘制参数 controlnet 设置 canny 边缘 depth 深度 lineart 线稿 效果 背景 这段时间不知道为啥小伙伴似乎喜欢制作很符合自己场景的ICON。…...

【Linux系统编程】第二十弹---进程优先级 命令行参数 环境变量

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、进程优先级 2.1、什么是优先级 2.2、优先级的描述 2.3、优先级与权限的关系 2.4、为什么要有优先级 2.5、Linux优先级的…...

无人机之4G模块的主要功能和优势

一、增强图传 在无人机飞行过程中&#xff0c;传统的图传方式可能会受到信号遮挡或干扰的影响&#xff0c;导致图像传输不稳定甚至中断。而4G模块通过结合4G网络技术&#xff0c;能够在原有图传技术的基础上提供增强的图传功能。当传统图传信号不佳时&#xff0c;无人机可以自动…...

深度学习-03 Pytorch

损失函数是用来衡量模型预测结果与真实值之间的差异&#xff0c;并用来优化模型的指标。在机器学习和神经网络中&#xff0c;常用的损失函数包括均方误差&#xff08;Mean Squared Error&#xff0c;MSE&#xff09;、交叉熵&#xff08;Cross-Entropy&#xff09;等。 反向传播…...

GRU(门控循环单元)的原理与代码实现

1.GRU的原理 1.1重置门和更新门 1.2候选隐藏状态 1.3隐状态 2. GRU的代码实现 #导包 import torch from torch import nn import dltools#加载数据 batch_size, num_steps 32, 35 train_iter, vocab dltools.load_data_time_machine(batch_size, num_steps)#封装函数&…...

【医疗大数据】医疗保健领域的大数据管理:采用挑战和影响

选自期刊**《International Journal of Information Management》**&#xff08;IF:21.0) 医疗保健领域的大数据管理&#xff1a;采用挑战和影响 1、研究背景 本研究的目标是调查阻止医疗机构实施成功大数据系统的组织障碍&#xff0c;识别和评估这些障碍&#xff0c;并为管理…...

gevent + flask 接口会卡住

在使用 gevent 和 Flask 处理 CPU 密集型任务时&#xff0c;确实可能会遇到性能瓶颈。这是因为 gevent 主要优化的是 I/O 密集型任务&#xff0c;而不是 CPU 密集型任务。以下是一些可能的原因和解决方案&#xff1a; 原因 Gevent 的协程模型&#xff1a; gevent 使用 greenle…...

SpringCloud Alibaba五大组件之——Sentinel

SpringCloud Alibaba五大组件之——Sentinel&#xff08;文末附有完整项目GitHub链接&#xff09; 前言一、什么是Sentinel二、Sentinel控制台1.下载jar包2.自己打包3.启动控制台4.浏览器访问 三、项目中引入Sentinel1.在api-service模块的pom文件引入依赖&#xff1a;2.applic…...

brpc之io事件分发器

结构 #mermaid-svg-v4SjrdGXadMO4udP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-v4SjrdGXadMO4udP .error-icon{fill:#552222;}#mermaid-svg-v4SjrdGXadMO4udP .error-text{fill:#552222;stroke:#552222;}#merm…...

MySQL | 知识 | 从底层看清 InnoDB 数据结构

文章目录 一、InnoDB 简介InnoDB 行格式COMPACT 行格式CHAR(M) 列的存储格式VARCHAR(M) 最多能存储的数据记录中的数据太多产生的溢出行溢出的临界点 二、表空间文件的结构三、InnoDB 数据页结构页页的概览Infimum 和 Supremum使用Page Directory页的真实面貌 四、B 树是如何进…...

3个关键功能解析:USBToolBox如何简化macOS与Windows的USB端口映射难题

3个关键功能解析&#xff1a;USBToolBox如何简化macOS与Windows的USB端口映射难题 【免费下载链接】tool the USBToolBox tool 项目地址: https://gitcode.com/gh_mirrors/too/tool 在Hackintosh和跨平台开发领域&#xff0c;USB端口映射一直是个令人头疼的技术难题。US…...

③ AI副业第一步:如何找到适合自己的AI赚钱赛道

③ AI副业第一步&#xff1a;如何找到适合自己的AI赚钱赛道选对赛道&#xff0c;努力才有意义。选错赛道&#xff0c;越努力离钱越远。前言&#xff1a;为什么大多数人AI副业做不起来&#xff1f; 我观察了100想做AI副业的人&#xff0c;失败的原因高度一致&#xff1a; 失败路…...

ARM PMU外部接口与性能监控寄存器详解

1. ARM性能监控寄存器外部接口深度解析性能监控单元(PMU)是现代处理器架构中用于硬件性能分析的核心模块&#xff0c;它通过一组可编程计数器实时捕获处理器微架构层面的各类事件。在ARMv8/v9架构中&#xff0c;PMU不仅可以通过系统寄存器访问&#xff0c;还提供了标准化的外部…...

PCB虚焊/走线断裂/焊盘脱落工程师易漏判

PCB 故障中&#xff0c;30% 并非元件损坏&#xff0c;而是 PCB 本身的隐性故障—— 虚焊、走线断裂、焊盘脱落、过孔开路。这类故障外观隐蔽、时好时坏、排查难度大&#xff0c;很多工程师反复更换元件仍无法解决&#xff0c;最终误判为 “板报废”。​一、PCB 隐性故障核心成因…...

电容损坏深度诊断,从外观到 ESR精准区分容衰与漏电

在 PCB 故障中&#xff0c;电容损坏占比超 40%&#xff0c;是当之无愧的 “头号杀手”。很多工程师仅靠 “鼓包漏液” 判断电容好坏&#xff0c;殊不知80% 的电容损坏是隐性的—— 外观平整但容值衰减、ESR 升高、轻微漏电&#xff0c;导致供电不稳、系统重启、噪声增大&#x…...

2026论文降AI怎么挑?亲测好用工具附免费降AI指南

“您的论文AIGC率为42%&#xff0c;超出学校30%的合格线&#xff0c;请修改后重新提交。”赶毕业论文的同学这段时间估计没少收到这样的提醒。2026年知网、万方、维普等主流平台的AI检测算法持续迭代&#xff0c;把AI生成内容改到符合学校要求&#xff0c;已经成了毕业生的刚需…...

如何进行TVA仿真引擎的“光照地狱”训练?

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

可解释AI新突破:基于局部帕累托最优的模型解释框架

1. 项目概述&#xff1a;当AI模型成为“黑箱”&#xff0c;我们如何撬开它&#xff1f;在机器学习项目里摸爬滚打十几年&#xff0c;我见过太多这样的场景&#xff1a;团队花大力气训练出一个准确率高达95%的复杂模型&#xff08;比如深度神经网络&#xff09;&#xff0c;业务…...

【数据结构与算法】数据结构基础——栈和队列

目录栈和队列1. 栈1.1 栈的概念1.2 栈的实现方式分析1.3 栈的实现1.3.1 栈的初始化与销毁1.3.2 入栈与出栈1.3.3 栈的判空与有效元素个数1.3.4 栈顶元素1.4 栈的扩展1.4.1 两栈共享空间2. 队列2.1 队列的概念2.2 队列的实现方式分析2.3 队列的实现2.3.1 队列的初始化与销毁2.3.…...

保姆级教程:在Windows 10上用QEMU+Kylin搭建可内外网访问的完整开发环境

在Windows 10上构建QEMUKylin全功能开发环境的终极指南当开发者需要在本地快速搭建一个隔离的国产操作系统开发环境时&#xff0c;QEMU虚拟化方案配合银河麒麟系统能提供高度灵活的沙箱体验。本文将手把手带你完成从零配置到内外网联通的完整工作流&#xff0c;涵盖虚拟化环境部…...