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

本文主要是介绍小程序获取页面某元素高度及兼容不同手机高度自适应，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于小程序获取页面某元素高度及兼容不同手机高度自适应的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！