uni-app动态配置TabBar

之前我们公司要用uni-app开发一个新项目，要求是根据登录账号的权限动态展示tabBar。tabbar中的icon也使用的是网络图片，通过调用接口获得。总结一下配置的方法。

配置tabbar的几种方法：

一、pages.json中配置

一般来说，tabBar是在pages.json中配置。具体可参考uni-app官方文档地址可点击

常见好用，但无法满足我们动态配置tabbar文字和图片的需求。

二、使用custom-tab-bar内置组件

这个组件也是根据pages.json中的信息生成的tabbar，可以支持更好的css，但是看了一下，平台只支持H5，兼容性较差。文档地址可以看一下文档参考。

三、uni.setTabBarItem方法

这个方法可以动态设置tabbar。参数如下：

一开始我们采用的是这个方法，说实话这个方法挺好用的。在用户登陆后获得对应权限，调用uni.setTabBarItem，用visible和iconPath确定底部的导航栏的每一项是否展示以及图标。文字、图标、是否可使都可以配置，包括文字的颜色什么的，结果真机测试的时候发现图标不展示，后面发现文档写着呢，iconPath这个属性除了微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台都不支持。如果有人只是单纯配置一下权限，icon图片放在本地的，用这个方法还是比较合适的。我们除了权限，还做了皮肤功能，图标经常改来改去，不方便经常一直往本地塞图标，所以这个方法只能忍痛放弃了。

四、uview的tabbar组件

其实使用uview之类的组件库的组件和自己写组件也是比较类似的，这里使用了uview的组件，也省去了一些样式的编写。使用组件，也不代表pages.json的tabbar不用配置，写还是要写的，把所有的都写进去，但是可以不用配图标，然后使用uni.hideTabBar()方法将原生的tabbar隐藏。

它的主要优点是可以自定义图标，包括网络图片。

uview的tabbar文档链接

我们的做法是，基于uview的tabbar，写一个公用的组件。在用户登录后调用接口获取当前权限以及图标url，生成一个u-tabbar-item的list，使用uni.setStorage方法存在本地，在公用组件中获取list，并渲染，其他需要用到底部导航栏的页面引入这个组件。

js 复制代码

<template>
  <view class="my-tabbar">
    <u-tabbar
      :value="value"
      @change="changeTab"
      :fixed="true"
      :placeholder="false"
      :safeAreaInsetBottom="false"
      :activeColor="color"
    >
      <u-tabbar-item v-for="item in list" :key="item.key" :text="item.text">
        <image
          v-if="item.selectedIconPath"
          class="icon"
          slot="active-icon"
          :src="item.selectedIconPath"
        ></image>
        <image class="icon" slot="inactive-icon" :src="item.iconPath"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

在methos中有一个changeTab方法，使用uni.switchTab切换tabbar。这样效果会好一些。虽然第一次进去还是会闪一下，不过问题不大，没有客户提就不用改了。