add tab bar

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

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

src/custom-tab-bar/index.scss

@@ -0,0 +1,3 @@
+@import "~taro-ui/dist/style/components/tab-bar.scss";
+@import "~taro-ui/dist/style/components/badge.scss";
+@import "~taro-ui/dist/style/components/icon.scss";

src/custom-tab-bar/index.tsx

@@ -0,0 +1,66 @@
+import { Component, ReactNode } from 'react';
+import { AtTabBar } from 'taro-ui';
+import Taro from '@tarojs/taro';
+import 'taro-ui/dist/style/index.scss';
+import './index.scss';
+
+const navList: Array<Taro.TabBarItem> = [
+  {
+    pagePath: '/pages/index/index',
+    text: '主页',
+  },
+  {
+    pagePath: '/pages/repair/repair',
+    text: '维修',
+  },
+  {
+    pagePath: '/pages/user/user',
+    text: '我的',
+  },
+];
+
+export default class Index extends Component {
+  state = {
+    selected: 0,
+    tabList: [
+      {
+        title: '主页',
+        iconType: 'home',
+      },
+      {
+        title: '维修',
+        iconType: 'settings',
+      },
+      {
+        title: '我的',
+        iconType: 'user',
+      },
+    ],
+  };
+
+  handleClick(idx: number) {
+    this.switchTab(idx, navList[idx].pagePath);
+  }
+
+  switchTab(idx: number, url: string) {
+    this.setSelected(idx);
+    Taro.switchTab({ url });
+  }
+
+  setSelected(idx: number) {
+    this.setState({
+      selected: idx,
+    });
+  }
+
+  render(): ReactNode {
+    return (
+      <AtTabBar
+        fixed
+        tabList={this.state.tabList}
+        onClick={this.handleClick.bind(this)}
+        current={this.state.selected}
+      />
+    );
+  }
+}