Taro自定义底部导航栏Tabbar(含所有的坑)

前言

最近团队请了一位ui设计师把家教小程序重新设计了一遍（之前是我设计的）微信小程序tabbar高度，所以不能用原生的底部导航栏，这里就记录一下自定义导航栏的实现，还挺多坑的

方案

我选择的是方案二

实现步骤在app.config.js中新增设置custom:true

在src目录下新建custom-tab-bar组件

index.jsx和mobx的编写

选中状态和点击切换的响应，我利用了mobx中一个全局的变量selected来实现，根据selected === list渲染的index来判断响应状态，这一点在下面的坑中详谈

mobx代码

//index.jsx
import { CoverImage, CoverView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { inject, observer } from "mobx-react";
import { Component } from "react";
import './index.scss';
@inject("globalData")
@observer
class customTabBar extends Component {
    state = {
        selected: 0,
        color: 'rgba(68, 68, 68, 1)',
        selectedColor: 'rgba(68, 68, 68, 1)',
        list: [
          {
            pagePath: 'pages/index/index',
            text: '首页',
            iconPath: '/assets/images/tab3.png',
            selectedIconPath: '/assets/images/home-active.png',
          },
          {
            pagePath: 'pages/my/index',
            text: '个人中心',
            iconPath: '/assets/images/tab1.png',
            selectedIconPath: '/assets/images/tab4-4.png',
          },
        ],
    }
    switchTab = (item) => {
        const url = '/' + item.pagePath
        Taro.switchTab({
            url: url
        })
    }
    render() {
        return (
            <CoverView className='bottom-tab'>
                {
                    this.state.list.map((item, index) => {
                        return <CoverView className='bottom-tab-item' onClick={this.switchTab.bind(this, item)} data-path={item.pagePath} key={item.text}>
                            <CoverImage className='bottom-tab-item-img' src={this.props.globalData.selected === index ? item.selectedIconPath : item.iconPath} />
                            <CoverView className='bottom-tab-item-text' style={{ color: this.props.globalData.selected === index ? this.state.selectedColor : this.state.color }}>
                                {item.text}
                            CoverView>
                        CoverView>
                    })
                }
            CoverView>
        )
    }
}
export default customTabBar
复制代码

在每个主页componentDidShow事件中，切换selected的值

到这步已经完成了自定义导航栏Tabbar的实现

坑！！！1. 网上在导航栏切换上的方案大多是如下

切换时直接改变组件state中的selected

可是需要点击两下才能激活选中样式，所以每个主页中也要手动更改selected的值

他们通过this.$scope.getTabBar()可以获取到底部导航栏的实例，可是我打印出来的是undefine微信小程序tabbar高度，我怀疑是Taro版本问题，附上我的版本图片：

所以我将selected定义成一个全局变量存在mobx中，我只要每次在页面生成的时候更改对应的index就好了

2. 图片路径

组件中list的图片路径要和app.config.js中的list图片路径一样，所以建议list直接copy过来

这点没做过还真不知道，弄了好久才发现问题

3. 跳转路径

Taro.switchTab跳转的url中开头要带上/，因为list中的pagePath开头是没有/的，不过这点网上很多文章都有说哈哈哈

END

这就是自定义底部导航栏Tabbar的整个流程和所踩的坑了，当然我的方案不一定是最好的，希望可以帮助到有需要的小伙伴呀