在微信小程序里我們一般用rpx作單位离例,但是有些情況我們通過js計算出來的是px作單位,那么我們就需要知道px跟rpx如何轉(zhuǎn)換
場景:scroll-view另凌,如果用scroll-view做出來根據(jù)手機適配的滑動頁面惰许,如下圖
微信圖片_20171102161121.jpg
滾動區(qū)域 = 窗口高度 - 導航欄高度
窗口高度小程序可以獲取到
wx.getSystemInfo({
success: (res)=> {
console.log(res.windowHeight)
}
})
這里res.windowHeight就是獲取到窗口高度批旺,但是這個窗口高度是px作為單位的,所以供璧,如果你得導航欄的高度如果是rpx作單位的話就必須轉(zhuǎn)換才行存崖。要轉(zhuǎn)換,就必須知道轉(zhuǎn)換的比例睡毒。
/* utils/util.js */
//獲取px與rpx之間的比列
function getRpx(){
var winWidth = wx.getSystemInfoSync().windowWidth;
return 750/winWidth;
}
知道了轉(zhuǎn)換比例来惧,那么我們在頁面加載的時候onload函數(shù)里設(shè)置如下
var utils=require('../../utils/utils.js')//這里說一下,這個util.js是配置的模塊函數(shù)演顾,再用的地方需要導入
wx.getSystemInfo({
success: (res)=> {
this.setData({
scrollHeight:res.windowHeight-utils.getRpx(導航欄高度) //設(shè)置適配高度
})
}
})