uniapp+vue3+ts实现底部导航栏

前言：uniapp实现tabbar切换

展示效果：

一：pages.json配置tabbar的基本路径

上代码：

 {
  "easycom": {
    "custom": {
      "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",

      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",

      "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },
  "pages": [
    {
      "path": "pages/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
    {
      "path": "pages/reset",
      "style": {
        "navigationBarTitleText": "重置密码"
      }
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom"
      }
    },

    {
      "path": "pages/info/info",
      "style": {
        "navigationBarTitleText": "消息"
      }
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/info/info"
      },
      {
        "pagePath": "pages/my/my"
      }
    ]
  }
}

二：在项目中创建components文件夹，并在文件夹下创建tabbar组件

tabbar.vue内容

<template>
  <view class="tab">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="tab-item"
      @click="switchTab(item, index)"
    >
      <image
        class="tab_img"
        :src="currentIndex == index ? item.selectedIconPath : item.iconPath"
      ></image>
      <view
        class="tab_text"
        :style="{ color: currentIndex == index ? selectedColor : color }"
        >{{ item.text }}</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import {  ref, onMounted } from 'vue';
interface TabItem {
  pagePath: string;
  iconPath: string;
  selectedIconPath: string;
  text: string;
}

const color = ref<string>('#999999');
const selectedColor = ref<string>('#F8B46B');
const list = ref<TabItem[]>([]);
const currentIndex = ref<number>(0);
// 声明接收props
const props = defineProps({
  selectedIndex: {
    type: Number,
    default: 0,
  },
});
onMounted(() => {
  currentIndex.value = props.selectedIndex;
  list.value = [
    {
      pagePath: "pages/index/index",
      iconPath: "/static/tab/home.png",
      selectedIconPath: "/static/tab/home_active.png",
      text: "首页",
    },
    {
      pagePath: "pages/info/info",
      iconPath: "/static/tab/info.png",
      selectedIconPath: "/static/tab/info_active.png",
      text: "消息",
    },
    {
      pagePath: "pages/my/my",
      iconPath: "/static/tab/my.png",
      selectedIconPath: "/static/tab/my_active.png",
      text: "我的",
    },
  ];
});
const switchTab = (item: TabItem, index: number) => {
  currentIndex.value = index;
  uni.navigateTo({ url: item.pagePath });
};
</script>

<style lang="scss" scoped>
.tab {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 112rpx;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

  .tab-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .tab_img {
      width: 42rpx;
      height: 42rpx;
    }
    .tab_text {
      font-size: 28rpx;
      margin-top: 9rpx;
    }
  }
}
</style>

三：main.ts中将自定义的tabBar定义为全局组件

上代码：

import { createSSRApp } from "vue";
import pinia from '@/store/index';
import uviewPlus from 'uview-plus';
import App from "./App.vue";
// svg图标
import 'virtual:svg-icons-register'
//⭐⭐ tabBar全局组件
import tabBar from "@/components/tabbar/tabbar.vue"
export function createApp() {
  const app = createSSRApp(App);
app.component('tabBar',tabBar)

  app.use(pinia).use(uviewPlus);
  return {
    app,
  };
}
  

四： 页面文件中使用组件

  <tabBar :selectedIndex = '0'></tabBar>

最后：独行自撑伞，何惧车马慢，且看远方星闪，掩过所有路险艰难。