微信小程序获取自定义tabbar的高度总是为0，怎么回事？

Question

我使用custom-tab-bar自定义了一个tabbar，里面的内容使用的vant weapp样式，显示和切换正常。

<view id="van-tabbar-id">
    <van-tabbar active="{{active}}" bind:change="onChange">
        <van-tabbar-item wx:for="{{list}}" wx:key="index">
            <image
        slot="icon"
        src="{{item.iconPath}}"
        mode="aspectFit"
        style="width: 25px; height: 25px;"
      />
      <image
        slot="icon-active"
        src="{{item.selectedIconPath}}"
        mode="aspectFit"
        style="width: 25px; height: 25px;"
      />
    {{item.text}}
        </van-tabbar-item>
    </van-tabbar>
</view>

在view中定义了一个id="van-tabbar-id"。方便获取组件尺寸。
我把鼠标放在上图红圈中，左侧显示该view尺寸为320*0，也就是tabbar的宽度为320，高度为0。
我分别在ready()中打印rect，在attached()中打印rect，均显示rect.width = 320,rect.height = 0。同时，rect.top=0,rect.bottom=0.

ready: function() {
    // 获取tabber栏的高度
    const query = wx.createSelectorQuery().in(this);
    query.select('#van-tabbar-id').boundingClientRect((rect) => {
      console.log(rect)
    }).exec()
  },

attached() {
    var obj = this.createSelectorQuery();
    obj.select('#van-tabbar-id').boundingClientRect(function (rect) {
      console.log('获取tabBar元素的高度',rect.height);
    }).exec();
  },

请朋友帮忙看看，问题出在哪里？

Answer 1

• 看下这篇博客，也许你就懂了，链接：微信小程序自定义tabBar的图标选中问题