如图,页面分三部分,顶部轮播、中间内容区、底部tabBar,底部固定,中间区高度用wx.createSelectorQuery()获取,轮播的高度自适应,使在不同的手机上完全铺满无滚动。
底部tabBar的高度固定(自定义)是63,但是有部分手机底下有空白区域,如上图对比,多出的这一部分也算作底部tabBar的高度了,打印wx.getSystemInfoSync(),可看到screenHeight 和 safeArea.bottom 的差值就是额外的高度。
获取页面某元素的高度代码
const query = wx.createSelectorQuery()
query.select('.heihgtBody').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
console.log(res)
})
完整代码如下
onLoad(){
var that = this
console.log(wx.getSystemInfoSync())
let SystemInfoSync = wx.getSystemInfoSync()
let windowHeight = SystemInfoSync.windowHeight //屏幕高度
//部分手机额外底下的空白高度
let addedHeight = SystemInfoSync.screenHeight - SystemInfoSync.safeArea.bottom
const query = wx.createSelectorQuery()
query.select('.heihgtBody').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
console.log("高度",res)
let height = windowHeight - res[0].height - 60 - addedHeight
that.setData({
swiperHeight: height + 'px'
})
})
},