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计算请参考前面的方式获取转换比例单位
文章内容太少,被搜索引擎所不齿。简单有用的知识不用繁文缛节