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

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

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

  

上一篇:微信小程序 模板语法


下一篇:微信小程序的路由方法