Taro+TypeScrippt 实现小程序根据不同身份的自定义tabbar
在src上添加如下文件夹
app.config.ts:
export default { pages: [ 'pages/home/home', //首页 'pages/product/product', //精选产品 'pages/dataWarehouse/dataWarehouse', //数据仓 'pages/mine/mine', //我的 'pages/login/login', //登录 ], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#F24D44', navigationBarTitleText: 'xxxxx', navigationBarTextStyle: 'white', }, tabBar: { custom: true,//这行很重要！！！ color: '#111e36', selectedColor: '#F24D44', backgroundColor: '#fff', borderStyle: 'white', list: [ { pagePath: 'pages/home/home', text: '首页', iconPath: './assets/images/tarBar/home.png', selectedIconPath: './assets/images/tarBar/home-selected.png', }, { pagePath: 'pages/product/product', text: '精选产品', iconPath: './assets/images/tarBar/product.png', selectedIconPath: './assets/images/tarBar/product-selected.png', }, { pagePath: 'pages/dataWarehouse/dataWarehouse', text: '数据仓', iconPath: './assets/images/tarBar/dataWarehouse.png', selectedIconPath: './assets/images/tarBar/dataWarehouse-selected.png', }, { pagePath: 'pages/mine/mine', text: '我的', iconPath: './assets/images/tarBar/mine.png', selectedIconPath: './assets/images/tarBar/mine-selected.png', }, ], } }; 复制代码index.config.ts:
export default { component: true, }; 复制代码index.scss:
.bottom-tab { position: fixed; display: flex; width: 100%; background: white; box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.03); bottom: 0; padding: 10px 0 calc(15rpx + env(safe-area-inset-bottom)) 0; // padding-bottom: env(safe-area-inset-bottom); &-item { flex: 1; display: flex; flex-direction: column; align-items: center; &-img { margin: 10px auto 10px; width: 40px; height: 40px; } &-text { font-size: 20px; font-family: PingFangSC, PingFangSC-Regular; color: #a5a1b1; line-height: 20px; height: 24px; } } } 复制代码index.tsx:
import { useEffect } from 'react'; import Taro from '@tarojs/taro'; import { CoverView, CoverImage } from '@tarojs/components'; import { useStore, observer } from '@store'; import './index.scss'; import { isTypes } from '@utils'; import homeIcon from '@assets/images/tarBar/home.png'; import homeSelectIcon from '@assets/images/tarBar/home-selected.png'; import productIcon from '@assets/images/tarBar/product.png'; import productSelectIcon from '@assets/images/tarBar/product-selected.png'; import dataIcon from '@assets/images/tarBar/dataWarehouse.png'; import dataSelectIcon from '@assets/images/tarBar/dataWarehouse-selected.png'; import mineIcon from '@assets/images/tarBar/mine.png'; import mineSelectIcon from '@assets/images/tarBar/mine-selected.png'; const customTabBar = () => { const { CommonStore } = useStore(); const isWxwork = isTypes.isWxwork(); const { selectedIndex, setSelectedIndex, setMyTabbar, myTabbar } = CommonStore; const stateC = { color: '#A5A1B1', selectedColor: '#F24D44', list: [ { pagePath: 'pages/home/home', text: '首页', iconPath: homeIcon, selectedIconPath: homeSelectIcon, }, { pagePath: 'pages/mine/mine', text: '我的', iconPath: mineIcon, selectedIconPath: mineSelectIcon, }, ], }; const stateB = { color: '#A5A1B1', selectedColor: '#F24D44', list: [ { pagePath: 'pages/home/home', text: '首页', iconPath: homeIcon, selectedIconPath: homeSelectIcon, }, { pagePath: 'pages/product/product', text: '精选产品', iconPath: productIcon, selectedIconPath: productSelectIcon, }, { pagePath: 'pages/dataWarehouse/dataWarehouse', text: '数据仓', iconPath: dataIcon, selectedIconPath: dataSelectIcon, }, ], }; const getTabBar = () => { if (isWxwork) { //企业微信 setMyTabbar(stateB); } else { //微信 setMyTabbar(stateC); } }; useEffect(() => { getTabBar(); }, [isWxwork]); const switchTab = (item, index) => { setSelectedIndex(index); const url = '/' + item.pagePath; Taro.switchTab({ url, }); }; return ( <CoverView className='bottom-tab'> {myTabbar?.list.map((item, index) => { return ( <CoverView className='bottom-tab-item' key={item.text} onClick={() => switchTab(item, index)}> <CoverImage className='bottom-tab-item-img' src={selectedIndex === index ? item.selectedIconPath : item.iconPath} /> <CoverView className='bottom-tab-item-text' style={{ color: selectedIndex === index ? myTabbar.selectedColor : myTabbar.color }} > {item.text} </CoverView> </CoverView> ); })} </CoverView> ); }; export default observer(customTabBar); 复制代码//isTypes.ts // 是否在企业微信打开 const isWxwork = () => { let result = false; const res = Taro.getSystemInfoSync(); if (res.environment === 'wxwork') { result = true; } return result; }; export default { isWxwork }; 复制代码common.ts:
import { observable, action } from 'mobx'; class CommonStore { @observable selectedIndex: number = 0; @observable myTabbar: any = null; @action.bound setSelectedIndex(value) { this.selectedIndex = value; } @action.bound setMyTabbar(value) { this.myTabbar = value; } } export default new CommonStore(); export interface ICommonStore extends CommonStore { } 复制代码结果： 企业微信端（B端） 微信端（C端）
这么做会有一个不可避免的问题就是第一次点击的时候会闪。 还有一个就是当点击第二个tab时退出小程序下一次进入小程序的时候页面是首页但是选中tab项是上一次退出的第二个tab，可以这样解决：在每一个tab页都监听，要是处于该页面就将index设置为该页面的index
作者：廖锦玉
链接：https://juejin.cn/post/7038203479340351502
伪原创工具 SEO网站优化 https://www.237it.com/