当前位置: 首页 > 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 树是如何进…...

我的杭州亲子旅游线路总结(坐船版)

我的杭州亲子旅游线路总结&#xff08;坐船版&#xff09; 这是我带娃走过的线路。孩子最近迷恋坐船&#xff0c;我看到新闻说梅花碑有公交船&#xff0c;而且梅花开了很漂亮&#xff0c;就去看看。 这里记录一下行程&#xff0c;说不定以后还去&#xff0c;能做参考。 文中提及…...

Phi-4-mini-reasoning效果展示:含单位换算、科学计数法的复合型数学题求解

Phi-4-mini-reasoning效果展示&#xff1a;含单位换算、科学计数法的复合型数学题求解 1. 模型能力概览 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步逻辑推导的问题。与通用聊天模型不同&#xff0c;它更专注于"问题输入→…...

开源 ESP32 网络收音机:OLED 界面与编码器交互全解析

1. ESP32网络收音机项目概述 第一次接触ESP32网络收音机项目时&#xff0c;我被这个小小的开发板展现出的强大功能震撼到了。想象一下&#xff0c;一个火柴盒大小的设备&#xff0c;不仅能连接WiFi播放全球各地的网络电台&#xff0c;还能通过OLED屏幕和编码器实现媲美商业产品…...

DVB-S系统设计:从理论到FPGA实现的完整指南

1. DVB-S系统概述&#xff1a;卫星数字电视的核心技术 DVB-S&#xff08;Digital Video Broadcasting - Satellite&#xff09;是卫星数字电视广播的国际标准&#xff0c;它定义了从信号编码、调制到传输的完整技术规范。我第一次接触DVB-S系统是在2015年参与一个卫星接收机项目…...

Jar Analyzer:提升Java开发效率的全方位JAR分析工具

Jar Analyzer&#xff1a;提升Java开发效率的全方位JAR分析工具 【免费下载链接】jar-analyzer Jar Analyzer - 一个 JAR 包 GUI 分析工具&#xff0c;方法调用关系搜索&#xff0c;方法调用链 DFS 算法分析&#xff0c;模拟 JVM 的污点分析验证 DFS 结果&#xff0c;字符串搜索…...

TempleOS 技术解析:从神圣代码到单地址空间设计的独特哲学

1. TempleOS的诞生&#xff1a;当代码遇见信仰 第一次听说TempleOS时&#xff0c;我正泡在技术论坛里闲逛。这个操作系统的名字就透着股神秘感——"神殿操作系统"。点开详细介绍后更震惊了&#xff1a;这居然是一个程序员声称按照"上帝指示"开发的系统&…...

LeetCode26. 删除有序数组中的重复项 27. 移除元素 35. 搜索插入位置 数组,双指针 二分查找

给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。考虑 nums 的唯一元素的数量为 k。去重后&#xf…...

Phi-3-mini-4k-instruct-gguf作品展:面向开发者的技术文档摘要生成样例

Phi-3-mini-4k-instruct-gguf作品展&#xff1a;面向开发者的技术文档摘要生成样例 1. 模型简介 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个经过优化的模型特别适合处理问答、文本改写、摘要整理和简短创作等任务。作为开发者工具&…...

短视频 SEO 如何提高网站的搜索排名

为什么短视频 SEO 是提高网站搜索排名的关键 在当今数字化时代&#xff0c;短视频平台已经成为人们获取信息和娱乐的主要渠道。短视频的流行不仅改变了人们的观看习惯&#xff0c;还深刻影响了网络营销的方式。如何利用短视频 SEO&#xff08;搜索引擎优化&#xff09;来提高网…...

Ostrakon-VL扫描终端实战:识别冷柜温度计读数并判断是否符合标准

Ostrakon-VL扫描终端实战&#xff1a;识别冷柜温度计读数并判断是否符合标准 1. 项目背景与价值 在零售和餐饮行业中&#xff0c;冷链管理是确保食品安全的关键环节。传统的人工检查冷柜温度方式存在效率低、易出错等问题。Ostrakon-VL扫描终端通过创新的像素风格界面和强大的…...