🎈 perf(自定义tabbar): 优化自定义tabbar

src/custom-tab-bar/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+}

src/custom-tab-bar/index.module.scss

@@ -8,6 +8,8 @@
   flex-flow: row nowrap;
   padding-bottom: env(safe-area-inset-bottom);
   background-color: #fff;
+  z-index: 9999;
+  box-shadow: 0 11px 7px 8px #c2c2c2;
   &-line {
     position: absolute;
     left: 0;

src/custom-tab-bar/index.tsx

@@ -1,49 +1,36 @@
 import { CoverImage, View } from '@tarojs/components'
 import { FC, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import IconFont from '@/components/iconfont'
 import classname from 'classname'
+import Taro, { useDidShow, useRouter } from '@tarojs/taro'
+import { useSelector } from '@/reducers/hooks'
+import { useDispatch } from 'react-redux'
+import { Dispatch } from 'redux'
+import { TabBarType } from '@/constants/tabbar'
+import { TabBarAction } from '@/reducers/tabBar'
+
+type IconfontName = Parameters<typeof IconFont>['0']['name']
+
 type TabBarIndexMap = {
   [Property: number]: {
     id: number
     pagePath: string
     text: string
-    iconPath: string
-    selectedIconPath: string
+    iconPath: IconfontName
+    selectedIconPath: IconfontName
   }
 }
 
 const CustomTabBar: FC = () => {
-  const [tabItem, setTabItem] = useState([
-    {
-      id: 1,
-      pagePath: 'pages/index/index',
-      text: '首页',
-      iconPath: 'icon-shouye1',
-      selectedIconPath: 'icon-shouye',
-    },
-    {
-      id: 2,
-      pagePath: 'pages/shopping/index',
-      text: '购物',
-      iconPath: 'icon-gouwu1',
-      selectedIconPath: 'icon-gouwu',
-    },
-    {
-      id: 3,
-      pagePath: 'pages/order/index',
-      text: '订单',
-      iconPath: 'icon-dingdan1',
-      selectedIconPath: 'icon-dingdan',
-    },
-    {
-      id: 4,
-      pagePath: 'pages/user/index',
-      text: '我的',
-      iconPath: 'icon-gerenzhongxin1',
-      selectedIconPath: 'icon-gerenzhongxin',
-    },
-  ])
+  console.log('重新渲染')
 
+  
+
+  const { selectedId, tabItem } = useSelector((state) => {
+    console.log('sdfasdfa', state)
+    return state.tabBarData
+  })
   const tabBarIndexMap = useMemo(() => {
     let map: TabBarIndexMap = {}
     for (let i = 0; i < tabItem.length; i++) {
@@ -51,26 +38,41 @@ const CustomTabBar: FC = () => {
     }
     return map
   }, [tabItem])
+  console.log('selectedId', selectedId)
 
-  const [selectedId, setSelectedId] = useState(1)
+  const dispatch = useDispatch<Dispatch<TabBarAction>>()
 
-  const handleSelectTabItem = () => {
-    return () => {}
+  const handleSelectTabItem = (id: TabBarIndexMap[number]['id']) => {
+    return () => {
+      setSelected(id)
+      Taro.switchTab({ url: tabItem.find(item=>item.id === id)?.pagePath! })
+    }
   }
+  const setSelected = (id: TabBarIndexMap[number]['id']) => {
+    dispatch({ type: TabBarType.SET_SELECTED, data: { tabItem, selectedId: id } })
+  }
+
+  // const router = useRouter()
+  // console.log('getCurrentPages==>', router)
+
+  // handleSelectTabItem(tabItem.find((item) => item.pagePath === router.path)?.id!)()
+
+  // useDidShow(() => {
+  //   console.log('getCurrentPages==>', router)
+  // })
 
   return (
     <View className={styles.customTabBar}>
       <View className={styles['customTabBar-line']}></View>
       {tabItem.map((item, index) => {
         return (
-          <View key={index} className={classname(styles['customTabBar-item'], styles['customTabBar-item-title'], selectedId === item.id ? styles['selected'] : '')} onClick={handleSelectTabItem}>
-            <View
-              className={classname(
-                styles['customTabBar-item-icon'],
-                styles.iconfont,
-                selectedId === item.id ? styles[item.selectedIconPath] : styles[item.iconPath],
-              )}></View>
-            <View >{item.text}</View>
+          <View
+            key={index}
+            className={classname(styles['customTabBar-item'], styles['customTabBar-item-title'], selectedId === item.id ? styles['selected'] : '')}
+            onClick={handleSelectTabItem(item.id)}>
+            <IconFont name={Number(selectedId) === item.id ? item.selectedIconPath : item.iconPath} size={56} />
+
+            <View>{item.text}</View>
           </View>
         )
       })}