小程序tabbar展示问题

Question

小程序如何根据不同身份展示不同的tabbar，还有m-tabbar是uniapp里的插件来的吗

Answer 1

引自免费微信小程序：皆我百晓生

在微信小程序中，要根据用户的不同身份展示不同的底部导航栏（TabBar），你需要在后端服务器实现用户认证逻辑，并将不同身份对应的TabBar配置信息发送给小程序。然后，在小程序客户端根据接收到的信息动态修改TabBar。

首先，确保你已经在小程序项目中引入了@dcloudio/uni-stat插件，这是 uni-app 中用于处理状态管理的插件。如果你还没有安装，可以使用以下命令进行安装：

uni add @dcloudio/uni-stat

接下来，我们将在 pages/index/index.vue 文件中创建一个简单的示例，展示如何根据用户身份改变 TabBar 的显示。这里假设你有两个用户角色：管理员（admin）和普通用户（user）。管理员的 TabBar 有一个额外的选项，而普通用户的 TabBar 只有基本的选项。

1. 首先，在 pages/index/index.vue 文件中引入状态管理：

<template>
  <view class="container">
    <!-- 页面内容 -->
  </view>
</template>

<script>
import { useStore } from '@dcloudio/uni-stat'
export default {
  setup() {
    const store = useStore()
    
    // 在生命周期钩子中获取用户身份并更新TabBar配置
    onMounted(() => {
      // 这里只是一个模拟，实际应用中应从服务器获取用户信息
      const userInfo = getUserInfoFromServer() // 获取用户信息函数
      if (userInfo.role === 'admin') {
        store.commit('setTabBarConfig', adminTabBarConfig)
      } else {
        store.commit('setTabBarConfig', userTabBarConfig)
      }
    })

    return {}
  },
}
</script>

1. 创建状态管理中的 mutations 和 actions：

在 store/index.js 文件中添加以下内容：

import { defineStore } from '@dcloudio/uni-stat'

const store = defineStore({
  state: () => ({
    tabBarConfig: {},
  }),
  mutations: {
    setTabBarConfig(state, config) {
      state.tabBarConfig = config
    },
  },
  actions: {
    async updateTabBarConfig({ commit }, userInfo) {
      if (userInfo.role === 'admin') {
        commit('setTabBarConfig', adminTabBarConfig)
      } else {
        commit('setTabBarConfig', userTabBarConfig)
      }
    },
  },
})

export default store

1. 定义不同的 TabBar 配置：

// 在 store/index.js 或者其他合适的地方定义 TabBar 配置
const adminTabBarConfig = [
  { ... }, // 基本的 TabBar 配置项
  {
    pagePath: 'pages/adminPage/adminPage',
    text: '管理员页面',
    iconPath: '路径/to/admin/icon.png',
    selectedIconPath: '路径/to/admin/icon-selected.png',
  },
]

const userTabBarConfig = [
  { ... }, // 基本的 TabBar 配置项
]

1. 最后，在 App.json 中引用状态管理中的 tabBarConfig：

{
  "tabBar": {
    "custom": true,
    "color": "#909090",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "list": [
      { ... }, // 基本的 TabBar 配置项
    ],
    "bindchange": "switchTab"
  },
  "globalStyle": {
    "customComponent": {
      "tabBar": "@/components/customTabBar.vue"
    }
  }
}

1. 创建自定义 TabBar 组件（customTabBar.vue）：

<template>
  <view class="custom-tab-bar">
    <view v-for="(item, index) in tabBarConfig" :key="index">
      <navigator :to="item.pagePath" open-type="switchTab">
        <view class="tab-item">
          <image :src="item.iconPath" class="tab-icon" />
          <text class="tab-text">{{ item.text }}</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  props: ['tabBarConfig'],
}
</script>

<style scoped>
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60rpx;
  background-color: #fff;
}

.tab-item {
  position: relative;
  width: 75rpx;
  height: 100%;
}

.tab-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}

.tab-text {
  font-size: 28rpx;
  color: #909090;
  line-height: 60rpx;
}
</style>

这样，当用户登录时，会根据他们的角色自动调整 TabBar 的显示。注意，这只是一个简化的示例，实际应用中可能需要处理更多复杂的情况，例如缓存、错误处理等。另外，关于 m-tabbar，它不是 uni-app 的内置组件，可能是某个第三方库提供的。上述方法同样适用于需要自定义 TabBar 的情况。