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

news2024/9/22 9:25:04

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计算请参考前面的方式获取转换比例单位


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

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

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

相关文章

伊犁云计算22-1 rhel8 dhcp 配置

1 局域网搭建 2 yum 配置 这个参考前面 不说 3 dnf 安装dhcp 好我们废话不说开始安装。理论看书去 进入 dhcp.conf 配置 重启dhcpd 不能报错&#xff01;&#xff01;&#xff01;&#xff01; 我们在客户机上做测试 全局的dhcp关闭 很明显我们的客户机获取到192.16…

Why Is Prompt Tuning for Vision-Language Models Robust to Noisy Labels?

文章汇总 本文的作者针对了提示学习的结构设计进行了分析&#xff0c;发现了一些规律&#xff1a; 1)固定的类名令牌为模型的优化提供了强正则化&#xff0c;减少了由噪声样本引起的梯度。 2)从多样化和通用的web数据中学习到的强大的预训练图像文本嵌入为图像分类提供了强大…

李宏毅机器学习2023-HW11-Domain Adaptation

文章目录 TaskLinkBaselineSimple BaselineMedium BaselineStrong BaselineBoss Baseline Task Domain Adaptation 通过训练真实图片得到分类模型&#xff0c;并将其应用到涂鸦图片上进行分类&#xff0c;来获得更高的精准度。 Link kaggle colab Baseline Simple Baseli…

JVM(HotSpot):JVM简单介绍

文章目录 一、什么是JVM二、优点三、比较四、学习路线 一、什么是JVM 定义&#xff1a;java程序的运行环境 首先&#xff0c;我们要知道&#xff0c;JVM是一套规范&#xff0c;运行java程序的一套规范。 那么&#xff0c;我们学习过java的人都知道&#xff0c;接口规范的实现类…

软考高级:数据库关系模式推理规则 AI 解读

你提出的是关系模式中的一些经典推理规则&#xff0c;这些规则在数据库理论、函数依赖和范式相关的讨论中经常出现。我们可以通过以下方式深入理解这些规则&#xff0c;并且对其中的推理逻辑进行分解。 生活化例子 想象你在管理一家快递公司&#xff0c;货物需要从仓库&#…

24年研赛-华为杯数模竞赛D题论文首发+代码分享

本届研赛助攻题目 C D F三题论文均已经全部完成。后更新计划 如图所示。 免费给大家分享 三个问题的论文部分代码 2024年华为杯-研赛分享资料&#xff08;论文部分代码&#xff09;&#xff08;已更新部分代码&#xff09;&#xff1a; 链接&#xff1a;https://pan.baidu.com…

数据结构哈希(hash)

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 数据结构哈希(hash) 收录于专栏 [C进阶学习] 本专栏旨在分享学习C的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. 哈希的概念 2.…

Linux:进程(四)

目录 一、进程优先级 二、Linux调度与切换 1.背景 2.进程切换 一、进程优先级 背景&#xff1a;在计算机中&#xff0c;软硬件资源是有限的&#xff0c;而进程想要访问某一种资源&#xff0c;就得通过排队来保证访问资源的过程是有条不紊的。 Linux下对优先级的定义。执行命…

MAE 模型

masked autoencoders (MAE) 论文地址&#xff1a;https://arxiv.org/abs/2111.06377 代码地址&#xff1a;https://github.com/facebookresearch/mae 模型结构图: 思想&#xff1a;自监督学习&#xff08;Self-Supervised Learning&#xff09;&#xff0c;遮住大部分&…

【BEV 视图变换】Fast-Ray(2): 代码复现+画图解释 基于查找表LUT、多视角到单个三维体素转换

paper&#xff1a;Fast-BEV: A Fast and Strong Bird’s-Eye View Perception Baseline code&#xff1a;https://github.com/Sense-GVT/Fast-BEV 致谢: 感谢我司傅同学提供的复现源码 一、完整复现代码(可一键运行)和效果图 Fast-Ray pipeline&#xff1a; 1.创建uv coord se…

PHP项目中Vendor错误导致项目失败的解决方案

在PHP项目中&#xff0c;vendor目录通常用于存放通过Composer安装的依赖库。虽然这些依赖极大地提高了开发效率&#xff0c;但它们也可能成为项目失败的隐患。本文将探讨常见的Vendor错误及其解决方案。 #### 1. 常见的Vendor错误 ##### 1.1 版本不兼容 不同的依赖可能对PHP…

微软AI核电计划

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

如何养成好习惯

最近一直在玩黑神话悟空&#xff0c;加上有录制实况视频&#xff0c;还是花了快一个月才通关&#xff0c;现在可以回到正常的文章更新节奏了。 上次我们学习了读书笔记-《习惯的力量》&#xff0c;不过那毕竟是国外的、十多年前的书籍了。如今&#xff0c;我们的生活又发生了不…

如何在银河麒麟操作系统中关闭IPv6

如何在银河麒麟操作系统中关闭IPv6 1、临时关闭IPv62、永久关闭IPv6方法一&#xff1a;通过sysctl.conf方法二&#xff1a;通过GRUB配置 1、3、 验证IPv6是否已关闭 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在当前的网络环境中&#…

MVC、MVP和MVVM三种设计模式之间的区别是什么

区别&#xff1a; mvc表示“模型-视图-控制器”&#xff0c;mvp表示“模型-视图-演示者”&#xff0c;mvvm表示“模型-视图-视图模型”&#xff1b; mvp、mvvm都是由mvc衍生出的。mvc中&#xff0c;view会直接从model中读取数据&#xff1b;mvp中&#xff0c;view并不直接使用m…

如何使用智能代码编辑器改变编程体验

你是否曾经在深夜加班时&#xff0c;望着屏幕上密密麻麻的代码&#xff0c;感到无比疲惫&#xff1f;或者在处理复杂项目时&#xff0c;被繁琐的代码管理和调试过程折磨得头痛不已&#xff1f;如果是这样&#xff0c;那么你可能还没有发现编程世界中的一个秘密武器——智能代码…

《关键跃升》读书笔记10

发展靠规划 执⾏靠闭环&#xff0c;提⾼靠循环&#xff0c;其实讲的是短期和中期的事。短期内完成 任务靠闭环&#xff0c;经理有⽆数需要执⾏的事在⼿边&#xff0c;要靠闭环&#xff0c;不能有漏 洞&#xff0c;不能出现不了了之的情况&#xff1b;中期的团队成⻓靠循环&…

go 读取excel数据存储到mysql

一、安装依赖 go get github.com/go-sql-driver/mysql go get github.com/jmoiron/sqlx 二、main.go package mainimport ("fmt""github.com/jmoiron/sqlx""log" ) import "github.com/tealeg/xlsx" import _ "github.com/go-s…

并查集(上)

并查集简要介绍&#xff1a; 我们先讲并查集的一般使用场景&#xff0c;之后再讲并查集的具体细节以及原理。 并查集的使用一般是如下的场景&#xff1a; 一开始每个元素都拥有自己的集合&#xff0c;在自己的集合里只有这个元素自己。 f i n d ( i ) find(i) find(i)&#…

使命召唤游戏助手系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;玩家管理&#xff0c;游戏分类管理&#xff0c;道具种类管理&#xff0c;游戏道具处管理&#xff0c;战绩信息管理&#xff0c;水平评估管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统…