用的APP微信小程序的tabbar自定义高度

微信小程序的tabbar高度是固定的，无法直接自定义修改。但可以通过以下方法实现类似自定义高度的效果：

1. 隐藏原有的tabbar，使用自定义组件代替tabbar，自定义组件的高度可以自由设置。
2. 在自定义组件中实现tabbar的功能，例如使用button或navigator实现点击切换页面。
3. 在页面中使用wx.getSystemInfoSync()获取系统信息，包括屏幕高度和底部安全区域高度，计算出自定义组件的实际高度，使其与底部安全区域对齐。

需要注意的是，这种方法可能会影响用户体验，建议在设计时考虑到用户习惯和操作便利性。

相关问题

uni-app 微信小程序之自定义中间圆形tabbar

UniApp是一个基于Vue.js的跨平台应用开发框架，支持快速构建微信小程序、H5、App等。关于自定义中间圆形TabBar，这在uni-app的小程序中是可以实现的，通常需要通过CSS样式和WXML模板配合来定制。以下是简单的步骤：

1. 首先，在WXML文件中创建TabBar组件，并给每个选项添加一个`pagePath`属性指向对应的页面路径：

<view class="custom-tabbar">
  <uni-tabbar>
    <uni-tabBarItem title="首页" pagePath="/pages/index/index" iconPath="your_icon_path_home.png"></uni-tabBarItem>
    <uni-tabBarItem title="分类" pagePath="/pages/category/category" iconPath="your_icon_path_category.png" selectedIconPath="selected_icon_path_category.png"></uni-tabBarItem>
    <!-- 更多选项 -->
  </uni-tabbar>
</view>

2. 然后，在CSS中定义自定义样式，比如让TabBar的背景透明，标签位于中心并设置圆角：

.custom-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: transparent;
}

.uni-tabbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64rpx; /* 根据实际需求调整高度 */
  border-radius: 50% 50% 0 0; /* 圆形效果 */
}

.uni-tabbar-item {
  margin: 0 8rpx; /* 调整间隙 */
}

3. 最后，记得在uni-app的全局样式表（如`app.wxss`或`.global.less`）中引入这个自定义的CSS文件。

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

### 获取微信小程序中自定义 TabBar 的高度

在微信小程序中，为了获取自定义 `TabBar` 的高度，可以利用 WXML 和 WXSS 中的一些特性以及 JavaScript 来计算其尺寸。一种常见的方式是在创建好自定义 `TabBar` 后，在对应的 `.js` 文件里通过 `createSelectorQuery()` API 实现测量。

#### 使用 createSelectorQuery 测量节点大小

此方法允许开发者查询指定的选择器所匹配的第一个节点的信息。对于想要取得自定义 `TabBar` 高度的情况来说，可以在 `custom-tab-bar/index.js` 或者任何需要知道该信息的地方加入如下代码：

Page({
  onLoad() {
    const query = wx.createSelectorQuery();
    
    // Select the custom tab bar component and get its bounding client rect.
    query.select('.custom-tab-bar').boundingClientRect((rect) => {
      console.log('Custom Tab Bar Height:', rect.height);
      
      // You can also set data to use this height value elsewhere in your app.
      this.setData({
        tabBarHeight: rect.height,
      });
    }).exec();
  }
})

上述代码片段展示了如何在一个页面加载完成后立即执行一次查询来获得 `.custom-tab-bar` 类名对应元素的高度，并将其记录下来以便后续使用[^2]。

另外需要注意的是，如果希望在整个应用的不同页面间共享这个高度值，则可能还需要考虑将它保存到全局变量或者其他合适的位置上供其他地方访问[^4]。