用的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的效果。具体实现方法如下：

1. 在app.json中设置tabBar的custom字段为true，表示自定义tabBar。

2. 在需要隐藏tabBar的页面的json文件中添加"usingComponents"字段，指定需要使用的自定义组件。

3. 在自定义组件中实现需要展示的内容，例如底部导航栏。

4. 在需要隐藏tabBar的页面中引用自定义组件，并将tabBar的hidden属性设置为true。

示例代码如下：

app.json

{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

index.json

{
  "usingComponents": {
    "custom-tab-bar": "/components/custom-tab-bar/custom-tab-bar"
  }
}

index.wxml

<custom-tab-bar tabBarHidden="{{tabBarHidden}}"></custom-tab-bar>

index.js

Page({
  data: {
    tabBarHidden: true
  }
})

custom-tab-bar.wxml

<view wx:if="{{!tabBarHidden}}">
  <!-- 底部导航栏内容 -->
</view>

custom-tab-bar.js

Component({
  properties: {
    tabBarHidden: {
      type: Boolean,
      value: false
    }
  }
})