小程序

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

文 / 倔强的巴顿 来源 / 原创 阅读 / 8887 5年前

在日常的小程序开发过程中,难免会遇到需要适配或者动态计算某个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的单位互转



35

评论

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

站点声明:本站转载作品版权归原作者及来源网站所有,原创内容作品版权归作者所有,任何内容转载、商业用途等均须联系原作者并注明来源。

© 2024 The Pride & Joy of an Artisan. · Designed By duoguyu · Powered By YzmCMS京ICP备19008479号-1
相关侵权、举报、投诉及建议等,请发E-mail:tonney@duoguyu.com

友情链接: YzmCMS 袁志蒙博客 坚果的世界 UXDtime 飞信网 追梦者 sjhv的杂货店 碧羽墨轩博客 薛定喵君 RollApi 简记 wen学习志 歪脖博客 逸风Ryen

扫码体验小程序