如图,页面分三部分,顶部轮播、中间内容区、底部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' }) }) },