页面跳转

Taro.switchTab({ url: `/pages/home/index` });

自定义导航

1. 新建 /src/custom-tab-bar/index.tsx 目录在里面写自定义导航
2. 新建文件 /src/custom-tab-bar/index.tsx

import {CoverImage, View} from "@tarojs/components";

import styles from './index.module.scss'
import {useState} from "react";

const NavigateData = [{
  pagePath: 'pages/home/index',
  selectedIconPath: '/assets/home_selected.png',
  iconPath: '/assets/home.png',
  text: 'home',
  key: 'home'
},
  {
    pagePath: 'pages/message/index',
    selectedIconPath: '/assets/message_selected.png',
    iconPath: '/assets/message.png',
    text: 'message',
    key: 'message'
  },
  {
    pagePath: 'pages/my/index',
    selectedIconPath: '/assets/my_selected.png',
    iconPath: '/assets/my.png',
    text: 'me',
    key: 'me'
  }]

const CustomTabBar = (props) => {
  const [selectedKey,setSelectedKey] = useState('home')

  return <View className={styles.navigateCover}>
    {NavigateData.map(v => ( <View key={v.key} className={styles.navigateItem} onClick={() => setSelectedKey(v.key)}>
      <CoverImage src={selectedKey === v.key ? v.selectedIconPath:v.iconPath} className={styles.img}></CoverImage>
      {v.text}
    </View>))}
  </View>
}

export default CustomTabBar

省略 css的文件

3. 修改app.config.ts 配置文件

export default defineAppConfig({
  pages: [
    'pages/home/index',
    'pages/message/index',
    'pages/my/index',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  tabBar: {
    custom: true,
    color: '#000000',
    selectedColor: '#622CE5',
    backgroundColor: '#ffffff',
    list: [
      {
      pagePath: 'pages/home/index',
      selectedIconPath: 'assets/home_selected.png',
      iconPath: 'assets/home.png',
      text: 'home',
      },
      {
        pagePath: 'pages/message/index',
        selectedIconPath: 'assets/message_selected.png',
        iconPath: 'assets/message.png',
        text: 'message',
      },
      {
        pagePath: 'pages/my/index',
        selectedIconPath: 'assets/my_selected.png',
        iconPath: 'assets/my.png',
        text: 'me',
      }
      ]
  }
})

虽然写了自定义 tabBar.list 还是要写 不然报错 pages 也要写 页面要建好，不然也报错