自定義 tabBar | 微信開放文檔
本文案例使用的Taro?非原生微信小程序
使用流程
1. 配置信息
- 在?
app.json?中的?tabBar?項指定?custom?字段，同時其余?tabBar?相關配置也補充完整。- 所有 tab 頁的 json 里需聲明?
usingComponents?項，也可以在?app.json?全局開啟。
案例Taro項目文件：app.config.js:tabBar文件類目export default {pages: ['pages/hotel/index', 'pages/order/index', 'pages/room/index', 'pages/mine/index'],subPackages: [{root: 'subPages',pages: ['login/index', 'webView/index'],},],tabBar: {custom: true,selectedColor: '#da4297',backgroundColor: '#fff',borderStyle: 'white',list: [{pagePath: 'pages/hotel/index',selectedIconPath: 'assets/img/tab/home-fill.png',iconPath: 'assets/img/tab/home-line.png',text: '首頁',},{pagePath: 'pages/order/index',selectedIconPath: 'assets/img/tab/order-fill.png',iconPath: 'assets/img/tab/order-line.png',text: '訂單',},{pagePath: 'pages/room/index',selectedIconPath: 'assets/img/tab/shop-fill.png',iconPath: 'assets/img/tab/shop-line.png',text: '商城',},{pagePath: 'pages/mine/index',selectedIconPath: 'assets/img/tab/mine-fill.png',iconPath: 'assets/img/tab/mine-line.png',text: '我的',},],},};
2. 添加 tabBar 代碼文件
在代碼根目錄下添加入口文件:
custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss案例：使用的Taro?非原生微信小程序
?
3. 編寫 tabBar 代碼
用自定義組件的方式編寫即可，該自定義組件完全接管 tabBar 的渲染。另外，自定義組件新增?
getTabBar?接口，可獲取當前頁面下的自定義 tabBar 組件實例index.jsx文件是自定義的tabBar?內容
import { ClassNames, ConstantList, StorageUtil } from '@/util'; import { CoverImage, CoverView } from '@tarojs/components'; import { inject, observer } from 'mobx-react'; import Taro from '@tarojs/taro'; import React, { Component } from 'react'; import './index.scss';@inject('appStore') @inject('initMod') @observer export default class StoreHome extends Component {constructor(props) {super(props);this.state = {color: '#979797',selectedColor: '#3D4DA4',// 自己定義的字段和內容list: [{pagePath: 'pages/hotel/index',selectedIconPath: '/assets/img/tab/home-fill.png',iconPath: '/assets/img/tab/home-line.png',text: '首頁',},{pagePath: 'pages/order/index',selectedIconPath: '/assets/img/tab/order-fill.png',iconPath: '/assets/img/tab/order-line.png',text: '訂單',requestLogin: true,},{appId: ConstantList.PASS_LOGIN_APPID,selectedIconPath: '/assets/img/tab/shop-fill.png',iconPath: '/assets/img/tab/shop-line.png',text: '商城',},{pagePath: 'pages/mine/index',// reallyPath:'/Coupon', selectedIconPath: '/assets/img/tab/mine-fill.png',iconPath: '/assets/img/tab/mine-line.png',text: '我的',requestLogin: true,},],};}switchTab = (data, index) => {// 如果需要登錄 又沒有token的話，則跳轉到登錄頁const token = Taro.getStorageSync(ConstantList.TOKEN);if (data.requestLogin && !token) {Taro.navigateTo({url: `/subPages/login/index?redirectTo=/${data.pagePath}`,});return;}if (!data.building) {// 跳轉其他小程序if (data.appId) {Taro.navigateToMiniProgram({// xxxxxxxxxxx});} else if (data.reallyPath) {// 跳轉H5地址 xxxxthis.props.initMod.changeSelectedTab(index); // 記錄當前高亮tab} else {Taro.switchTab({ url: '/' + data.pagePath });this.props.initMod.changeSelectedTab(index);}} else {Taro.showToast({title: '該功能即將開放，敬請期待',icon: 'none',duration: 1000,});}};render() {const { list, selectedColor, color } = this.state;const { selectedTab } = this.props.initMod;return (<CoverViewclassName={ClassNames('tab-bar', {'tab-bar_hide': this.props.appStore.state.hideTarBar})}>{list.map((item, index) => {return (<CoverViewkey={'tabBar' + index}className='tab-bar-item'onClick={() => {this.switchTab(item, index);}}><CoverView className='tab-bar-box'>{item.iconPath && item.selectedIconPath && (<CoverImageclassName='image imageSelect'src={selectedTab === index ? item.selectedIconPath : item.iconPath}></CoverImage>)}<CoverViewclassName='text'style={{color: selectedTab === index ? selectedColor : color,}}>{item.text}</CoverView></CoverView></CoverView>);})}</CoverView>);} }index.scss?tabBar樣式文件
.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: $size-tabbar;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);border-radius: 28px 28px 0 0;background: #fff;box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);&_hide {display: none;}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 10px 0;.tab-bar-box{width: 60px;margin: 0 auto;position: relative;.ring{position: absolute;display: block;width: 16px;height: 16px;background-color: $color-primary;border-radius: 50%;right: 0;top: 0;z-index: 20000;}}.image {width: 50px;height: 50px;margin: 0 auto;}.text {line-height: 30px;font-size: 20px;white-space: nowrap;}} }最終自定義樣式效果
