小程序如何根据用户的不同显示不同导航栏

小程序可以根据用户的不同显示不同的导航栏，这通常通过自定义底部导航栏（tabBar）来实现。以下是实现这一功能的主要步骤和要点：

一、配置全局文件

在小程序的全局配置文件app.json中，需要将tabBar的custom属性设置为true，以启用自定义底部导航栏。例如：

{
  "tabBar": {
    "custom": true,
    // 其他tabBar配置，如颜色、背景色等
  }
}

二、创建自定义导航栏组件

1. 在项目的根目录下或与/pages同级的目录下，创建一个名为custom-tab-bar的文件夹。
2. 在custom-tab-bar文件夹中，创建组件的四个文件：index.js、index.json、index.wxml和index.wxss。

三、编写组件代码

1. index.js

在index.js中，定义组件的数据、属性和方法。数据部分可以包括当前选中的导航项、导航项列表（根据用户角色动态生成）等。例如：

Component({
  data: {
    selected: 0, // 当前选中的导航项索引
    color: "#000000",
    roleId: wx.getStorageSync('roleId'), // 从缓存中获取用户角色ID
    selectedColor: "#1396DB",
    allList: [
      {
        list1: [ // 用户A的底部导航栏
          { "text": "首页", "pagePath": "/pages/index/index", "iconPath": "/images/01.png", "selectedIconPath": "/images/01_select.png" },
          { "text": "我的", "pagePath": "/pages/person/person", "iconPath": "/images/03.png", "selectedIconPath": "/images/03_select.png" }
        ],
        list2: [ // 用户B的底部导航栏
          { "text": "订单", "pagePath": "/pages/order/order", "iconPath": "/images/04.png", "selectedIconPath": "/images/04_select.png" },
          { "text": "个人", "pagePath": "/pages/person/trader", "iconPath": "/images/03.png", "selectedIconPath": "/images/03_select.png" }
        ]
      }
    ],
    list: [] // 当前显示的导航项列表
  },
  attached() {
    // 根据用户角色设置导航项列表
    if (this.data.roleId === 0) {
      this.setData({
        list: this.data.allList[0].list1
      });
    } else if (this.data.roleId === 1) {
      this.setData({
        list: this.data.allList[0].list2
      });
    }
    wx.setStorageSync('list', this.data.list); // 将导航项列表存入缓存
  },
  methods: {
    switchTab(e) {
      // 切换导航项
      const data = e.currentTarget.dataset;
      const path = data.path;
      this.setData({
        selected: data.index
      });
      wx.switchTab({
        url: path
      });
    }
  }
});

2. index.json

在index.json中，声明该组件为自定义组件：

{
  "component": true,
  "usingComponents": {}
}

3. index.wxml

在index.wxml中，使用<cover-view>和<cover-image>等标签来渲染导航栏。例如：

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="tab-bar-text" style="color:{{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

4. index.wxss

在index.wxss中，定义导航栏的样式。例如：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-top: 1px solid #ebebeb;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  padding-top: 10px;
}

.cover-image {
  width: 25px;
  height: 25px;
}

.tab-bar-text {
  font-size: 12px;
}

四、使用自定义导航栏组件

在小程序的每个需要使用自定义导航栏的页面中，都需要在页面的json文件中声明使用该组件。例如：

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

同时，在页面加载时（如onLoad或onShow方法中），需要调用自定义导航栏组件的方法来更新选中状态（如果需要的话）。

五、用户角色判断与导航栏更新

在用户登录或角色发生变化时（如从用户A切换到用户B），需要更新用户角色ID（可以存储在全局变量或缓存中），并重新加载自定义导航栏组件以显示正确的导航项列表。这可以通过在小程序的app.js中监听用户登录状态变化或使用全局事件来实现。

通过以上步骤，就可以实现小程序根据用户的不同显示不同的导航栏了。需要注意的是，在实际开发中可能还需要根据具体需求进行进一步的优化和调整。