✨ feat(自定义tabbar): 完善自定义tabbbar

2022-09-08 12:02:27 +08:00
parent caf7066663
commit 2a964829b4
26 changed files with 712 additions and 228 deletions
@@ -0,0 +1,39 @@
+.customTabBar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  flex-flow: row nowrap;
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: #fff;
+  &-line {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleY(0.5);
+  }
+  &-item {
+    flex: 1;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: column nowrap;
+    &-icon {
+      width: 56px;
+      height: 56px;
+      font-size: 60px;
+    }
+    &-title {
+      margin-top: 10px;
+      font-size: 20px;
+    }
+  }
+}
+.selected {
+  color: $color_main;
+}
@@ -0,0 +1,80 @@
+import { CoverImage, View } from '@tarojs/components'
+import { FC, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import classname from 'classname'
+type TabBarIndexMap = {
+  [Property: number]: {
+    id: number
+    pagePath: string
+    text: string
+    iconPath: string
+    selectedIconPath: string
+  }
+}
+
+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',
+    },
+  ])
+
+  const tabBarIndexMap = useMemo(() => {
+    let map: TabBarIndexMap = {}
+    for (let i = 0; i < tabItem.length; i++) {
+      map[tabItem[i].id] = tabItem[i]
+    }
+    return map
+  }, [tabItem])
+
+  const [selectedId, setSelectedId] = useState(1)
+
+  const handleSelectTabItem = () => {
+    return () => {}
+  }
+
+  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>
+        )
+      })}
+    </View>
+  )
+}
+export default CustomTabBar