小程序获取页面某元素高度及兼容不同手机高度自适应

             

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