微信小程序开发之rpx和px的单位互转 / 小程序

2月前 阅读 / 450 来源 / 原创 文 / 倔强的巴顿

在日常的小程序开发过程中,难免会遇到需要适配或者动态计算某个view容器高度的问题。比如,滑动一定高度后需要置顶的菜单栏。如果,使用微...

在日常的小程序开发过程中,难免会遇到需要适配或者动态计算某个view容器高度的问题。

比如,滑动一定高度后需要置顶的菜单栏。

如果,使用微信官方提供的监听页面滑动事件(onPageScroll)的API方法,此时获得的scrollTop属性的单位为 px 

微信小程序开发之rpx和px的单位互转

而我们的wxss代码里的计算单位默认都是 rpx ,这就需要我们在处理该功能时,将监听页面滑动得到的 px 值,同步换算为 rpx 单位,来保证后续功能的准确性。


so,下面就提供一个相当便捷的rpx和px之间单位换算的方法:


px转rpx:

const px = rpx / 750 * wx.getSystemInfoSync().windowWidth;


rpx转px:

const rpx = px * 750 / wx.getSystemInfoSync().windowWidth;



注:

    wx.getSystemInfoSync() 方法说明如下图,或可至官方API获取详细说明。

微信小程序开发之rpx和px的单位互转



12

评论列表
共1条评论