微信小程序获取顶部状态栏在不同机型上,最终效果不一样?

370 阅读1分钟

现象

有需求需要实现元素吸顶效果,并且顶部导航栏在顶部fixed固定, 需要吸顶到导航栏正下方 通过 wx.getSystemInfoSync().statusBarHeight + 自定义导航栏高度 = 元素吸顶上间距

在不同机型上,表现不一,以iphone6为模拟器能完美实现,但是切换其他机型,特别是plus/max机型,高度计算错误,导致不能完美吸顶在顶部导航栏下(始终出现缝隙)

原因

项目中采用rpx,所以计算吸顶上间距也是使用的rpx,
但是 wx.getSystemInfoSync().statusBarHeight 获取到的状态栏高度为px,之前一直使用px*2得到rpx,所以最终原因还是rpx计算错误

解决方法

获取设备屏幕宽度 = wx.getSystemInfoSync().windowWidth
计算rpx换算比例 = 750/windowWidth
获得状态栏高度rpx = statusBarHeight * 750/windowWidth

原本rpx是以屏幕展示750个像素点为基准,在iphone6上,屏幕宽度为375px, 375px = 750rpx,所以,1px = 2rpx;

此时因设备宽度不同,以 iphone 414 宽度为例, 1px != 2rpx。此时 1px = 750/414 rpx