随着移动互联网的飞速发展，越来越多的应用程序被开发出来。而移动应用程序最常见的元素之一就是 tabbar。tabbar 是一种底部导航栏，可用于切换不同的页面或功能。uniapp 是一个跨平台应用程序开发框架，可以让开发者编写一次代码，即可在多个平台上运行。本文将介绍如何在 uniapp 中设置 tabbar 的高度。
首先，我们需要在 App.vue 中设置 tabBar 的位置和高度。在 template 中，可以通过设置一个 div 元素的样式来实现：
在上面的代码中，我们将 TabBar 包含在一个 div 元素中，并通过设置包含元素的样式来设置 TabBar 的高度为 100px。同样，我们把这个元素的位置设置为 fixed，并且让它距离底部为 0。
接着，我们需要在 pages 中设置每个页面的样式，以便让 TabBar 不遮挡页面内容。在 page 的样式表中，我们需要将底部的 margin 值设置为 tabBar 的高度，这样页面内容就会显示在 TabBar 上方。
最后，我们可以在 TabBar 中添加图标或文字等内容。在 TabBar 的子组件中，我们需要设置一个 icon 和一个 text 属性。icon 属性用于设置显示在 TabBar 中的图标，而 text 属性用于设置显示在图标下方的文本。下面是一个示例：
在上面的代码中，我们创建了三个 tabbar-item 元素，并分别设置了它们的 icon 和 text 属性。
通过以上步骤，我们就可以在 Uniapp 中设置 TabBar 的高度并在其中添加内容了。需要注意的是，不同平台的操作系统和屏幕分辨率可能会影响 TabBar 的高度和显示效果，需要进行调试和适配。
