在微信小程序里我们一般用rpx作单位,但是有些情况我们通过js计算出来的是px作单位,那么我们就需要知道px跟rpx如何转换
场景:scroll-view,如果用scroll-view做出来根据手机适配的滑动页面,如下图
滚动区域 = 窗口高度 - 导航栏高度
窗口高度小程序可以获取到
wx.getSystemInfo({ success: (res)=> { console.log(res.windowHeight) } })
这里res.windowHeight就是获取到窗口高度,但是这个窗口高度是px作为单位的,所以,如果你得导航栏的高度如果是rpx作单位的话就必须转换才行。要转换,就必须知道转换的比例。
/* utils/util.js */ //获取px与rpx之间的比列 function getRpx(){ var winWidth = wx.getSystemInfoSync().windowWidth; return 750/winWidth; }
知道了转换比例,那么我们在页面加载的时候onload函数里设置如下
var utils=require('../../utils/utils.js')//这里说一下,这个util.js是配置的模块函数,再用的地方需要导入 wx.getSystemInfo({ success: (res)=> { this.setData({ scrollHeight:res.windowHeight-utils.getRpx(导航栏高度) //设置适配高度 }) } })