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

news/2024/9/21 19:38:32 标签: uni-app, javascript, rpx, 动态区域, typescript

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.niftyadmin.cn/n/5669339.html

相关文章

装载机智能AI影像防撞系统,危险区域实现熄火停车功能!

装载机盲区问题备受关注。为了减少因「驾驶视觉盲区」和「内轮差」导致的驾驶安全事故。车辆行驶过程中&#xff0c;AI智能实时行人识别预警摄像头&#xff0c;可以降低事故的风险。保护工地道路使用者的安全&#xff0c;并避免因事故而产生更的高昂成本。 【应用场景一】倒车防…

AI视觉算法盒是什么?如何智能化升级网络摄像机,守护全方位安全

在智能化浪潮席卷全球的今天&#xff0c;以其创新技术引领行业变革&#xff0c;推出的集高效、智能、灵活于一体的AI视觉算法盒。这款革命性的产品&#xff0c;旨在通过智能化升级传统网络摄像机&#xff0c;为各行各业提供前所未有的安全监控与智能分析能力&#xff0c;让安全…

记录一下,Vcenter清理/storage/archive空间

一、根因 vpostgres&#xff1a;这个目录可能包含与 vCenter Server 使用的 PostgreSQL 数据库相关的归档文件过多&#xff0c;导致空间被占用。 二、处理过程 1、SSH登陆到Vcenter. 2、df -Th **图中可以看到 /storage/archive 使用占比很高。 /storage/archive 目录通常用…

python怎么打开编辑器

1、在电脑开始菜单中点击所有程序&#xff0c;找到Python程序&#xff0c;点击其中idle。 2、然后点击左上角的“File”&#xff0c;打开菜单&#xff0c;在下拉菜单中选择“New File”选项&#xff0c;就可打开python编辑器了。 3、在打开的python编辑器中就可以输入自己想写的…

Docker 以外置数据库方式部署禅道

2.安装步骤 2.1.参考资料 禅道官网文档: https://www.zentao.net/book/zentaopms/docker-1111.html https://www.zentao.net/book/zentaopms/405.html 2.2.详细步骤 ssh 登录服务器创建目录 /opt/zentao /opt/zentao/data /opt/zentao/db cd /opt mkdir zentao mkdir zentao…

实变函数精解【23】

文章目录 集合的测度完全可加性、次可加性和有限可加性1. 完全可加性&#xff08;Complete Additivity&#xff09;2. 次可加性&#xff08;Subadditivity&#xff09;3. 有限可加性&#xff08;Finite Additivity&#xff09;总结 Lebesgue积分收敛定理一、定义与背景二、主要…

【已解决】【Linux】cd 命令找不到文件夹的问题

在Linux操作系统中&#xff0c;cd 命令是用于改变当前工作目录的常用命令。然而&#xff0c;有时候我们在使用 cd 命令时会遇到找不到指定文件夹的问题。本文将详细探讨可能的原因以及相应的解决方法。 例子&#xff1a;cd /usr/local 原因一&#xff1a;路径错误 问题描述&…

lambda 自调用递归

从前序与中序遍历序列构造二叉树 官方解析实在是记不住&#xff0c;翻别人的题解发现了一个有意思的写法 class Solution { public:TreeNode* buildTree(vector<int>& preorder, vector<int>& inorder) {auto dfs [](auto&& dfs, auto&&…