小程序获取自定义tabbar高度踩坑

 在小程序中使用自定义tabbar后，页面page高度会包含自定义tabbar高度，为了方便页面布局，可以获取tabbar高度后，用calc(100% - {{tabbarHeight}})来计算。

坑点：发现用tdesign自定义tabbar组件后，小程序无法正确获取高度，经测试可以做如下修改：

1.custom-tab-bar/index.wxml，在tdesign组件外层添加view，并配置组件fixed为false，原因是自定义组件默认使用了fixed，会导致最外层的view没有高度，所以需要手动关闭，目的是为了正确获取到最外层view的高度：

<!--custom-tab-bar/index.wxml-->
<view class="tabbar-box">
  <t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}" fixed="{{false}}">
    <t-tab-bar-item wx:for="{{list}}" wx:key="value" value="{{item.value}}" icon="{{item.icon}}">
      {{item.label}}
    </t-tab-bar-item>
  </t-tab-bar>
</view>

2.custom-tab-bar/index.scss，这里相当于将自定义组件中的fixed移到外层view上：

/* custom-tab-bar/index.wxss */
.tabbar-box {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

3.custom-tab-bar/index.ts，定义获取高度方法

methods: {
    // 获取高度
    getHeight() {
      let query = wx.createSelectorQuery().in(this);
      return new Promise((resolve: any) => {
        query.select('.tabbar-box').boundingClientRect(rects => {
          resolve(rects.height)
        }).exec();
      })
    }
  }

4.在pages/index/index.ts中调用方法：

// index.ts

Page({
  data: {
    tabbarHeight: 0
  },
  onLoad() {
  },
  async onShow() {
    // 设置tabbar高亮
    if (typeof this.getTabBar === 'function' ) {
      this.getTabBar().setData({
        value: 0
      })
      // 获取自定义tabbar高度
      let tabbarHeight = await this.getTabBar().getHeight()
      this.setData({
        tabbarHeight
      })
    }
  },
})

5.在pages/index/index.wxml中使用即可，注意返回的tabbarHeight值的单位是px：

<view style="height: calc(100vh - {{tabbarHeight}}px);"></view>