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

曾经终败给现在 2023-06-23 06:58 17阅读 0赞

### **效果图：** ###

【iphone5 】下tabBar的高度是 64

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

【iPhone XR】下tabBar的高度是  82

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]

如何获取到不同手机上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。

[微信小程序组件生命周期][Link 1]。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191217215309254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191217215419269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html