微信小程序获取自定义tabBar的高度。不同屏幕自定义tabBar的高度是不一样的。_获取自定义tabbar高度

效果图：

【iphone5 】下tabBar的高度是 64

【iPhone XR】下tabBar的高度是  82 

如何获取到不同手机上tabBar的高度呢。首先这个tabBar是自定义的。

思路：

我们只要获取到 tabBar 元素的高度值就可以。

(1)在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替，否则就使用 wx.createSelectorQuery()

(2)在组件的attached 生命周期内调用。

attached() {
    var obj = this.createSelectorQuery();
    obj.select('.tab-bar').boundingClientRect(function (rect) {
      console.log('获取tabBar元素的高度',rect.height);
      wx.setStorageSync('tabBarHeight', rect.height)     // 将获取到的高度设置缓存，以便之后使用
    }).exec();
},

（3）组件的生命周期：

组件中最重要的生命周期有：created    attached   detached。

微信小程序组件生命周期。