taro3 vue H5 如何自定义tabBar

[yaoyanweb]

这个特性解决了什么问题？

因需求问题，不同场景底部tab个数不一样。

这个 API 长什么样？

可以像小程序自定义tabBar

[shushu2013]

查看 tabBar 源码，可以自己实现一个删除、添加 tabBar 菜单的方法，根据这个实现自定义 tabBar

import Taro from "@tarojs/taro"

// 删除指定的 tabBar 菜单项
function removeTabBarItem(index) {
  const app = Taro.getCurrentInstance().app
  const tabBarList= app.config.tabBar.list

  if (Array.isArray(tabBarList) && tabBarList.length > index) {
    Taro.hideTabBar({})
    tabBarList.splice(index, 1)

    if (tabBarList.length === 0) {
      return
    }

    Taro.showTabBar({})

    // 刷新 tabBar 选中状态
    setTimeout(() => {
      Taro.eventCenter.trigger('__taroRouterChange')
    }, 100)
  }
}

// 添加 tabBar 菜单项
function addTabBarItems(barItems, index = 0) {
  const app = Taro.getCurrentInstance().app
  const tabBarList= app.config.tabBar.list

  if (Array.isArray(tabBarList)) {
    Taro.hideTabBar({})
    tabBarList.splice(index, 0, ...barItems)
    Taro.showTabBar({})

    // 刷新 tabBar 选中状态
    setTimeout(() => {
      Taro.eventCenter.trigger('__taroRouterChange')
    }, 100)
  }
}

使用示例

import serviceNormal from './img/service-normal@2x.png'
import serviceActive from './img/service-active@2x.png'

// 添加菜单项
const tabBarItems = [
  {
    iconPath: serviceNormal,
    selectedIconPath: serviceActive,
    pagePath: '/pages/service/index',
    text: '服务',
  },
]

// 从第二个位置开始添加菜单项
addTabBarItems(tabBarItems, 1)

[ZakaryCode]

duplicate #10049