深入剖析：揭开微信小程序自定义tabbar高度获取之谜

2023-08-26 06:57:19

微信小程序自定义tabbar高度获取指南

在微信小程序中，自定义tabbar为开发者提供了极大的灵活性，让其可以设计出更加个性化和用户友好的界面。然而，想要获取自定义tabbar的高度时，却常常会遇到一些困难，传统的获取方式往往会返回null值，让人头疼不已。本文将提供三种解决方案，帮助开发者轻松获取自定义tabbar的高度，让小程序开发更加高效顺畅。

解决方案一：page.json文件设置

这种方法需要在page.json文件中进行设置，步骤如下：

启用自定义tabbar： 在page.json文件中设置"custom": true。
绑定id： 在tabBar组件上绑定一个id，例如"my-tabbar"。
获取高度： 在页面的onLoad生命周期函数中使用wx.createSelectorQuery()方法获取tabBar组件的高度。

代码示例：

Page({
  onLoad: function () {
    const query = wx.createSelectorQuery();
    query.select('#my-tabbar').boundingClientRect(rect => {
      console.log(rect.height); // 输出tabbar的高度
    }).exec();
  }
});

解决方案二：自定义组件

使用自定义组件也是一种获取tabbar高度的有效方法，步骤如下：

创建自定义组件： 创建一个自定义组件，例如"MyTabBar"，并在组件的样式文件中定义tabbar的高度。
使用组件： 在需要使用自定义tabbar的页面中，将"MyTabBar"组件添加到页面结构中。
获取高度： 在组件的onReady生命周期函数中使用wx.createSelectorQuery()方法获取tabbar组件的高度。

代码示例：

Component({
  onReady: function () {
    const query = wx.createSelectorQuery();
    query.select('.my-tabbar').boundingClientRect(rect => {
      console.log(rect.height); // 输出tabbar的高度
    }).exec();
  }
});

解决方案三：使用第三方库

市面上有很多第三方库可以帮助开发者获取自定义tabbar的高度，这些库通常提供更加简单易用的API，帮助开发者快速解决问题。

常见的第三方库：

小程序官方组件库： 提供了mp-custom-tabbar组件，可以轻松获取tabbar高度。
taro-ui： 提供了AtTabBar组件，支持自定义tabbar高度的获取。
vant-weapp： 提供了Tabbar组件，同样支持高度获取。

代码示例：

import { Tabbar } from 'vant-weapp';

Page({
  onLoad: function () {
    const query = wx.createSelectorQuery();
    query.select('.van-tabbar').boundingClientRect(rect => {
      console.log(rect.height); // 输出tabbar的高度
    }).exec();
  }
});