uniapp自定义tabbar及用户权限

---

写在前文

在开发小程序时难免会涉及到一些用户权限的区分配置，这时官方提供的默认tabbar就难以满足，所以需要我们自定义tabbar来解决。但是查看了很多资料后，感觉都很麻烦，尤其是对新手很不友好。

官方文档

官方说明

两步搞定

第一🙅

首先，在components文件夹下创建CustomTabbar文件夹和CustomTabbar.vue文件（这里的名字自定义即可）

CustomTabbar.vue文件内容如下

<template>
  <wd-tabbar v-model="tabbar" @change="handleChange" active-color="#ee0a24" inactive-color="#7d7e80">
    <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
    <wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
    <wd-tabbar-item title="客服" icon="chat"></wd-tabbar-item>
    <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
    
  </wd-tabbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tabbar = ref(1)

// 页面映射 这里是对应的路由
const pages: Record<string, string> = {
  '1': '/pages/home/home',
  '2': '/pages',
  '3': '/pages',
  '4': '/pages',
}

// tabbar切换
function handleChange({ value }: { value: string }) {
  const targetPage = pages[value]
  if (targetPage) {
    uni.switchTab({ url: targetPage })
  }
}
</script>

第二🙅‍

第一步完成之后，直接在对应的页面引入使用即可

用户权限配置

这里有列出两种写法：
第一种：直接用role进行判断即可
第二种：如果角色较多，可以封装函数进行使用

提示

以上自定义tabbar使用的是wot-design-uni组件库中的tabbar
如果出现闪烁或者点击两次才能跳转bug，请将tabbar初始值进行数据持久化处理