uniapp自定义tabbar（支持中间凸起，角标，全端适用）

  • 背景
  • 思路
  • 实现
  • 尾巴

背景

在使用uniapp进行开发时，tabbar是我们使用的很频繁的一个组件，但是在特定的平台会有一些使用上的限制，无法通过一套代码来做通用平台的适配。比如说中间按钮凸起，动态隐藏某个tab（不同角色展示不同功能），使用字体图标，数字角标等，这些功能不是所有平台都支持。今天我们就用一套代码来实现这些功能全端支持。

思路

实现思路就是通过通过自定义view来实现我们这个tabbar功能，然后页面通过组件来展示。通过点击不同的tab来显示不同的组件来达到模拟原生tabbar切换效果。那有些人要问了，你咋知道我项目中有多少个tab，这些tab叫什么名字了？那这里就可以利用uniapp提供的组件easycom模式来解决这些问题，只要我们设置好组件的限制个数和提前占位名称，这些问题就迎刃而解。

实现

1、我们现在components（没有就新建一个components目录）目录下新建一个文件夹（我这里叫ctab），然后分别新建一个vue组件和一个js文件。组件可以让我们在其他地方引用，js文件主要是做配置。

2、新建tab组件，我们组件最多限制5个tab组件，然后需要通过easycom占位来实现，所以你需要几个tab组件就在components目录下建几个组件命名为ctabx。如下所示，我这里要展示三个tab：

特别注意这里的tab组件命名一定要符合easycom规范，不然可能会引起组件引用错误。
这里示例一个ctab1写法：

<template><view style="width: 750rpx;height: 300rpx;background-color: red;">首页</view></template><script>export default {name: "ctab1",data() {return {};},mounted() {},methods: {}}</script><style></style>

3、tabbar组件ctab.vue实现，这里就直接上代码了，直接copy就能使用，关键地方已加上注释

<template><view><!--中间按钮凸起模式--><block v-if="midBtn && midBtn.show"><!--凸起模式最多展示四个--><block v-if="tabs.length < 4"><ctab1 v-show="sindex == 0"></ctab1><ctab2 v-show="sindex == 2"></ctab2></block><block v-else="tabs.length >= 4"><ctab1 v-show="sindex == 0"></ctab1><ctab2 v-show="sindex == 1"></ctab2><ctab3 v-show="sindex == 3"></ctab3><ctab4 v-show="sindex == 4"></ctab4></block><view class="tabbar"><!--中间按钮凸起模式tab为3个或者5个--><view class="tab-item"  v-for="(item,index) in (tabs.length 
 普通模式：
 
 再普通模式下，我们可以通过配置或者动态修改tabs中tab obj中的show属性来动态形式和隐藏某个tab，我们这里配置第一个tab为隐藏：
 
...tabs: [{icon: '../../static/tabbar/main_tab_home_normal.png',iconSelect: '../../static/tabbar/main_tab_home_select.png',text: '首页',iconfont: '',show: false,//隐藏第一个tabmark: 0//角标数量，小于等于0不显示}, {icon: '../../static/tabbar/main_tab_task_normal.png',iconSelect: '../../static/tabbar/main_tab_task_select.png',text: '任务',iconfont: '',show: true,mark: 100}, {icon: '../../static/tabbar/main_tab_my_normal.png',iconSelect: '../../static/tabbar/main_tab_my_select.png',text: '我的',iconfont: '',show: true,mark: 9}]...
效果图如下：
 
 7、到这里我们的自定义tabbar就完成了，剩下的就是在tab组件中实现我们各个页面的逻辑。我们通过配置文件可以轻松的使用一个套代码实现tabbar中间按钮凸起、数字角标、动态隐藏、自定义mask覆盖tabbar（需要自己控制好层级），字体图标等功能，并且全端适用。
尾巴
本次内容就这么多，欢迎给我点赞和关注，有什么疑问欢迎给我留言，谢谢！