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

px->rpx转换

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

TypeScript 复制代码
const { screenWidth } = uni.getSystemInfoSync()

const pixelUnit = screenWidth / 750 // rpx->px比例基数

动态元素区域获取

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

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

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

相关推荐
熊的猫4 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
四喜花露水44 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
瑶琴AI前端1 小时前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
工业甲酰苯胺2 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
程序员爱技术5 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
悦涵仙子6 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
兔老大的胡萝卜6 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
耶啵奶膘8 小时前
uniapp-是否删除
linux·前端·uni-app