uni-app 封装tabbar组件(vue3)

1、在page页面配置tabbar 只配置路径就行

"tabBar": {
		"color": "#747174",
		"selectedColor": "#6cc2c1",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
        "list":[
            {"pagePath": "pages/index/index"},
            {"pagePath": "pages/news/index"},
            {"pagePath": "pages/map/index"},
            {"pagePath": "pages/activity/index"},
            {"pagePath": "pages/my/index"},
        ]
}

2、创建tabbar组件，并且添加 uni.hideTabBar()  将系统初始的tabbar隐藏

首先创建tabbarList存放我们tabbar的配置参数

 tabbarList: [
    {
      pagePath: '/pages/index/index',
      text: '主页',
      iconPath: '../static/tabbar/home.png',
      selectedIconPath: '../static/tabbar/homeSelected.png',
    },
    {
      pagePath: '/pages/news/index',
      text: '新闻',
      iconPath: '../static/tabbar/news.png',
      selectedIconPath: '../static/tabbar/newsSelected.png',
    },
    {
      pagePath: '/pages/map/index',
      text: '地图',
      iconPath: '../static/tabbar/map.png',
      selectedIconPath: '../static/tabbar/mapSelected.png',
    },
    {
      pagePath: '/pages/activity/index',
      text: '活动',
      iconPath: '../static/tabbar/activity.png',
      selectedIconPath: '../static/tabbar/activitySelected.png',
    },
    {
      pagePath: '/pages/my/index',
      text: '我的',
      iconPath: '../static/tabbar/my.png',
      selectedIconPath: '../static/tabbar/mySelected.png',
    },
  ],

然后使用uni.switchTab方法进行切换，下面是完整的tabbarList的代码

<template>
  <view class="tabbar">
    <view class="tabbar-item" v-for="(item, index) in data.tabbarList" :key="index" @click="changeTabbar(item)">
      <img class="icon" :src="index == props.currentPage ? item.selectedIconPath : item.iconPath" />
      <view class="title" :style="index == props.currentPage ? { color: '#6cc2c1' } : ''">{{ item.text }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, defineProps, onMounted } from 'vue'

const props = defineProps({
  currentPage: Number,
})
const data = reactive({
  tabbarList: [
    {
      pagePath: '/pages/index/index',
      text: '主页',
      iconPath: '../static/tabbar/home.png',
      selectedIconPath: '../static/tabbar/homeSelected.png',
    },
    {
      pagePath: '/pages/news/index',
      text: '新闻',
      iconPath: '../static/tabbar/news.png',
      selectedIconPath: '../static/tabbar/newsSelected.png',
    },
    {
      pagePath: '/pages/map/index',
      text: '地图',
      iconPath: '../static/tabbar/map.png',
      selectedIconPath: '../static/tabbar/mapSelected.png',
    },
    {
      pagePath: '/pages/activity/index',
      text: '活动',
      iconPath: '../static/tabbar/activity.png',
      selectedIconPath: '../static/tabbar/activitySelected.png',
    },
    {
      pagePath: '/pages/my/index',
      text: '我的',
      iconPath: '../static/tabbar/my.png',
      selectedIconPath: '../static/tabbar/mySelected.png',
    },
  ],
})

const changeTabbar = function (item: any) {
  uni.switchTab({
    url: item.pagePath,
  })
}

onMounted(() => {
  uni.hideTabBar();
})
</script>

<style lang="less" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  box-sizing: border-box;
  padding: 15rpx 0rpx 55rpx 0rpx;
  background-color: #f8f8f8;
  border-top: #cfcfcf 1px solid;
  .tabbar-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 28px;
      height: 28px;
    }
    .title {
      font-size: 10px;
    }
  }
}
</style>

3、接下来 在需要使用的组件中引入即可 ，但是我们在使用时要传递一个current参数，用于判断我们所选中的tabbar。这里的current参数就是这一项在tabbarList中的index索引值。

<w-tabbar :currentPage="1"></w-tabbar>

4、现在我们就可以正常使用了 但是，在我们首次加载页面的时候会出现系统默认tabbar 闪现的情况

我们直接在app中添加uni.hideTabBar()   我自己这样使用之后就不会闪了

onShow(() => {
  uni.hideTabBar();
});