uniapp tab控制

本文章用到的 uniapp 的 主要 api

1.`uni.hideTabBar()` 隐藏tab
2.`uni.showTabBar()` 显示tab
3.`uni.setTabBarItem({})` 参数 index 必传 从左到右， visible 非必传 true 显示； false 隐藏 其余请到官网查看
4.`uni.switchTab({})` 参数 url 必传，必须是在 page.json 里面的 tabBar 里面定义的， 且不能携带参数

本文章的前言

1.由于我做的 uniapp 项目是个相对较大的项目，一期一期的产品迭代，让每个 url 上应该显示那几个 tab 非常非常乱，于是乎决定想个办法写成一个管理的 Js 文件
2.例如在整个 app 真正的首页上面 显示 “首页” “学习” “消息” “我的” 四个 tab
3.在“线下活动” 整个页面 显示“线下活动” “我的活动” 两个 tab ...
4.当然也有不需要 tab 的情况，例如 登录页 ...

话不多说，直接上核心思想 以及 代码

1.当然你需要在 page.json 里面的“tabBar”配置 可能出现在 tab 的页面       

"tabBar": {
    "color": "#666666",
    "selectedColor": "#000000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
                    "pagePath": "pages/home-230/index",
                    "iconPath": "static/tab-bar-icon/home-dark.png",
                    "selectedIconPath": "static/tab-bar-icon/home-light.png",
                    "text": "首页"
            },
            {
                    "pagePath": "pages/learn-230/index",
                    "iconPath": "static/tab-bar-icon/learn-dark.png",
                    "selectedIconPath": "static/tab-bar-icon/learn-light.png",
                    "text": "学习"
            },
            {
                    "pagePath": "pages/message-230/index",
                    "iconPath": "static/tab-bar-icon/message-dark.png",
                    "selectedIconPath": "static/tab-bar-icon/message-light.png",
                    "text": "消息"
            },
            {
                    "pagePath": "pages/user-230/index",
                    "iconPath": "static/tab-bar-icon/user-dark.png",
                    "selectedIconPath": "static/tab-bar-icon/user-light.png",
                    "text": "我的"
            },
            ...
     }]
}

2.新建一个 tab-bar-switch.js 的 js 文件（核心的代码）

// 设置一些常量 要显示 的页面 数组里面的每一项代表一个 tab
const UPDATE_MESSAGE = ['ABNORMAL', 'HOME', 'LEARN', 'MESSAGE', 'USER'],
      ABNORMAL_CHECK_TABBAR = ['MESSAGE', 'USER'],
      ABNORMAL_TABBAR = ['ABNORMAL', 'MESSAGE', 'USER'],  
      NORMAL_TABBAR = ['HOME', 'LEARN', 'MESSAGE', 'USER'],
      JOB_TABBAR = ['JOB_POSITION', 'JOB_ENTERPRISE','JOB_SCHOOL_RECR', 'JOB_USER'],
/*
    TAB_BAR_INFO对象里面 每一个 Key 就是对应这 UPDATE_MESSAGE 数组里面的 Value
    TAB_BAR_INFO对象里面 每一个 Value 包含 
        index: uni.setTabBarItem({})这个 api 里面的 index
        path: page.json 里面的 pagePath 这样我们用到 uni.switchTab({url: ...}) 这个api的时候就可以传入
        show: 值就是我们 上面设置的 常量（这边是不是有点懵逼？？仔细想一想。。）
*/      
const TAB_BAR_INFO = {
      ABNORMAL: {
        index: 0,
        path: '/pages/home-230/abnormal',
        show: ABNORMAL_TABBAR
      },
      HOME: {
        index: 1,
        path: '/pages/home-230/index',
        show: NORMAL_TABBAR
      },
      LEARN: {
        index: 2,
        path: '/pages/learn-220/index',
        show: NORMAL_TABBAR
      },
      ...
}

// 判断是不是不显示 tab 如 登录页...
const HIDE_TABBAR = ['LOGIN'];

export default (name) => {
      // 判断是不是不需要 tab 的跳转路径
      HIDE_TABBAR.includes(name) ? uni.hideTabBar() : uni.showTabBar();
      // 跳转页面
      uni.switchTab({ url: TAB_BAR_INFO[name].path });
      // 这边是因为 我们这个项目有消息 要出现红点点 的 所以我定义了 UPDATE_MESSAGE 里面就是 又出现 消息这个 tab 去走一个需不需要展示红点点的接口
      if (UPDATE_MESSAGE.includes(name)) setUnreadMessage();
      // 这边就是设置 tab 了
      TAB_BAR_INFO[name].show.forEach(item => {
        uni.setTabBarItem({
          index: TAB_BAR_INFO[item].index,
          visible: true
        })
      })
      // 全部的路由，除了show的，其余全部关闭, 避免一个个写hide了
      const keys = Object.keys(TAB_BAR_INFO)
      keys?.forEach(key => {
        if(!TAB_BAR_INFO[name].show.includes(key)) {
          uni.setTabBarItem({
            index: TAB_BAR_INFO[key].index,
            visible: false
          })
        }

      })
}

3.接下来就是调用了
导出文件 import tabBarSwitch from '@/tab-bar-switch'
tabBarSwitch('') 参数就是 TAB_BAR_INFO 对象里面的 Key 就可以