uniapp设置tabbar高度

在UniApp中设置TabBar的高度可以通过修改全局样式来实现。具体步骤如下：

1. 打开项目的根目录，在`App.vue`文件中找到`<style>`标签。
2. 在`<style>`标签中添加以下代码：

/* 修改TabBar的高度 */
.uni-tabbar {
  height: 60px; /* 设置你想要的高度，单位可以是px、rem等 */
}

3. 保存文件，重新编译运行项目，TabBar的高度就会被修改为你设置的值。

需要注意的是，以上方法会全局修改所有页面的TabBar高度。如果你只想修改某个页面的TabBar高度，可以在对应页面的`<style>`标签中添加相应的样式。

相关问题

uniapp设置tabbar高度无效

Uniapp中设置tabbar高度的方法是通过在pages.json文件中的"globalStyle"属性下添加"tabBar"属性来进行设置，如下所示：

"globalStyle": {
  "tabBar": {
    "height": "100px"
  }
}

但是，如果设置后发现高度无效，可能是由于以下原因：

1. 所设置的高度值不合法或者不够大，可以尝试设置更大的值或者使用rem单位来进行设置；

2. 在tabbar组件中设置了固定高度，导致全局设置无效，可以尝试在tabbar组件中通过style属性来进行高度设置，如下所示：

<uni-tabbar style="height: 100px;">
  ...
</uni-tabbar>

3. 其他样式冲突或者覆盖，可以通过浏览器调试工具查看样式规则的优先级以及是否存在覆盖。

uniapp设置tabbar height无效

要设置uniapp的tabbar高度，可以通过以下步骤：

1. 在App.vue中添加一个全局样式：

<style>
  .uni-tabbar {
    height: 100px; // 设置你想要的高度
  }
</style>

2. 在pages.json中设置tabbar的样式：

{
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabbar/home.png",
        "selectedIconPath": "/static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/static/tabbar/mine.png",
        "selectedIconPath": "/static/tabbar/mine-active.png"
      }
    ],
    "position": "bottom",
    "borderStyle": "white"
  }
}

3. 在每个页面的.vue文件中，将底部的区域留出来，以显示tabbar：

<template>
  <view class="container">
    <!-- 这里是页面内容 -->
  </view>
  <view class="bottom"></view>
</template>

<style>
  .container {
    height: calc(100% - 100px); // 计算出底部tabbar的高度
  }
  .bottom {
    height: 100px; // 设置tabbar的高度
  }
</style>

通过以上步骤设置tabbar高度，应该可以解决uniapp设置tabbar高度无效的问题。