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

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

相关推荐
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花3 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
码农六六3 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保3 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~3 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
周三有雨3 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
建群新人小猿4 小时前
会员等级经验问题
android·开发语言·前端·javascript·php