uniapp怎么设置tabbar高度

什么是uniapp

uniapp是基于vue.js的一个跨平台开发框架，可以用于开发微信小程序、H5、安卓、iOS等多个平台应用，减少开发人员的开发成本，提高开发效率。

tabbar在uniapp中的作用

tabbar是uniapp中的一种页面导航方式，一般放置在页面底部，可以快速切换不同的页面。在一些应用中，比如微信小程序中，虽然也可以使用其他的导航方式，但是tabbar比较常用，同时也符合用户的习惯。

uniapp中设置tabbar高度的方式

通过全局样式设置

可以通过在App.vue文件中，在全局样式中设置tabbar的高度。具体代码如下：

  <style lang="scss">
    /* 定义tabbar高度 */
    .uni-tabbar {
      height: 100px;
    }
  </style>

上述代码中，将tabbar高度设置为100px，可以根据实际情况进行调整。

通过在tabbar组件中单独设置

除了通过全局样式设置tabbar高度，还可以在每个页面中单独设置。这种方式比较灵活，可以根据实际情况选择不同的高度。具体代码如下：

  <template>
    <view>
      <!-- 页面内容 -->
    </view>
    <view class="custom-tabbar">
      <!-- tabbar内容 -->
    </view>
  </template>
  <style lang="scss">
    /* 定义tabbar高度 */
    .custom-tabbar {
      height: 100px;
    }
  </style>

上述代码中，在每个页面中都需要加上tabbar组件，在tabbar组件中单独设置高度。需要注意的是，tabbar组件需要放置在页面的底部，才能起到导航的作用。

总结

以上就是uniapp中设置tabbar高度的两种方式。通过全局样式设置tabbar高度比较方便，适用于所有的页面；而在每个页面中单独设置tabbar高度比较灵活，可以根据不同的页面需要进行调整。在实际开发中，可以根据实际情况选择适合自己的方法。