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

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

該實現方式是借鑑了官方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文件中代碼以下：html

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組件後解決了這一問題git

另外若是中間的圖標跳轉爲二級頁面，則不須要配置在tabbar字段下。github

第三步：分別在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就完成了。小程序