taro中自定義tabbar實現中間圖標凸出效果

遇到的一個需求是在tabbar上有一個凸起的小圖標， 但是微信自帶的tabbar是沒有這個效果的， 無奈，只能使用自定義tabbar，查找了多方文檔后發現大多是原生小程序實現， 關於taro文檔的少之又少， 所以記錄下來，方便下次查看。

該實現方式是借鑒了官方demo以及一位大佬關於原生小程序自定義tabbar的文章

官方demo傳送門：自定義tabbar    文章傳送門：點擊此處

關於taro實現方式，我放在了github上：https://github.com/puerilexy/tabbarDemo

效果展示：(可以看到下面凸出的智能機器人圖標)

 第一步： 在app.js中的tabbar字段下指定custom: true，即為啟用自定義tabbar

config = {
    pages: [
      'pages/index/index',
      'pages/user/user',
      'pages/intellect/intellect'
    ],
    window: {
      backgroundColor: '#f4f4f4',
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: '#666',
      selectedColor: '#ed6c00',
      backgroundColor: '#fafafa',
      borderStyle: 'black',
      custom: true,
      list: [{
        pagePath: 'pages/index/index',
        iconPath: 'assets/home.png',
        selectedIconPath: 'assets/home-active.png',
        text: '主頁'
      }, {
        pagePath: 'pages/user/user',
        iconPath: 'assets/user.png',
        selectedIconPath: 'assets/user-active.png',
        text: '我的'
      }]
    }
  }

 第二步：在src目錄下新建custom-tab-bar文件夾(注意此文件夾和pages文件目錄同級)

├── src
    ├── custom-tab-bar
        ├── index.js
        ├── index.scss
    ├── pages
        ├── index
        ├── user
        ├── intellect

在custom-tab-bar下的index文件中代碼如下：

import Taro, {
  Component
} from '@tarojs/taro'
import {
  CoverView, CoverImage
} from '@tarojs/components'
import Intellect from '../assets/intellect.png'
import './index.scss'

class customTabBar extends Component {

  state = {
    selected: 0,
    color: '#666',
    selectedColor: '#ed6c00',
    list: [{
        pagePath: '/pages/index/index',
        iconPath: '/assets/home.png',
        selectedIconPath: '/assets/home-active.png',
        text: '主頁'
      },
      {
        pagePath: '/pages/user/user',
        iconPath: '/assets/user.png',
        selectedIconPath: '/assets/user-active.png',
        text: '我的'
      }
    ]
  }

  switchTab = (item) => {
    const url = item.pagePath
    Taro.switchTab({
      url
    })
  }

  jumpIntellect = () => {
    Taro.navigateTo({url: '/pages/intellect/intellect'})
  }

  componentDidMount() {
    this.setState({
      selected: this.props.ind
    })
  }

  // 自定義 tabBar的頁面
  render() {
    return ( 
      <CoverView className='tab-bar'>
        <CoverView className='tab-bar-wrap'>
          {
            this.state.list.map((item, index) => {
              return <CoverView className='tab-bar-wrap-item'
                onClick={this.switchTab.bind(this, item)}
                data-path={item.pagePath}
                key={item.text}
              >
                <CoverImage className='tab-bar-wrap-item-icon' src={this.state.selected === index ? item.selectedIconPath : item.iconPath} />
                <CoverView className='tab-bar-wrap-item-btn'
                  style={{color: this.state.selected === index ? this.state.selectedColor : this.state.color}}
                >{item.text}
                </CoverView>
              </CoverView>
            })
          }
        </CoverView>
        <CoverImage className='intellect-icon' src={Intellect} onClick={this.jumpIntellect} />
      </CoverView>
    )
  }
}
export default customTabBar

注意: 這里是我在華為手機測試中出現自定義的tabbar會跟隨頁面滾動而滾動， 在我選擇了cover-view組件后解決了這一問題

另外如果中間的圖標跳轉為二級頁面，則不需要配置在tabbar字段下。

第三步：分別在index合user文件中獲取自定義tabbar組件實例，更新選中態（注意：原生小程序中可直接通過this.getTabBar直接獲取，在taro中需要通過this.$scope.getTabBar來獲取組件實例）

 

// index.js
componentDidShow () {
  if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
      this.$scope.getTabBar().$component.setState({
        selected: 0
      })
    }  
}


// user.js
componentDidShow () {
  if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
      this.$scope.getTabBar().$component.setState({
        selected: 1
      })
    }  
}

 

 

到此，在微信小程序中自定義凸出圖標的tabbar就完成了。