参考文档

微信小程序相关开发文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
虽然是uniapp框架但是实现方式和原生小程序相似

实现思路

1、app.json里面tabBar添加配置 custom:true,其他和非自定义设置一样
2、在components文件夹里添加Tabbar组件
3、在对应的页面里引用Tabbar组件

pages.json 配置代码

{"tabBar": {"custom": true, //必写"color": "#000000",   //color,selectedColor,backgroundColor可不写"selectedColor": "#000000", //tab选中颜色"backgroundColor": "#000000","list": [{ //每个tab对应的路由路径"pagePath": "page/index/index",//此处page前面未加/"text": "首页"}, {"pagePath": "page/index/order","text": "订单"},{"pagePath": "page/index/myUser","text": "我的"},]},
}

Tabbar组件代码

HTML代码

<template><u-tabbar :value="activeIndex" fixed activeColor="#11C0D7" inactiveColor="#8C8C8C"><u-tabbar-itemv-for="(item, index) in tabList":text="item.text":key="index":border="false"@click="tabBarChange(item.pagePath, index)"><template #active-icon><image class="u-page__item__slot-icon" :src="item.selectedIconPath"></image></template><template #inactive-icon><image class="u-page__item__slot-icon" :src="item.iconPath"></image></template></u-tabbar-item></u-tabbar>
</template>

JS代码

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const tabList = ref([{pagePath: 'index',text: '首页',iconPath: '../../static/images/index.png', //本地图片selectedIconPath: '../../static/images/index_select.png'},{pagePath: 'order',text: '订单',iconPath: '../../static/images/order.png',selectedIconPath: '../../static/images/order_select.png'},{pagePath: 'myUser',text: '我的',iconPath: '../../static/images/user.png',selectedIconPath: '../../static/images/user_select.png'}
])
const activeIndex = ref(0) //当前选中项
onShow(() => {getActiveIndex()
})// 自定义tab组件监听页面路径选中下标
const getActiveIndex = () => {const pages = getCurrentPages()let page = pages[pages.length - 1]tabList.value.forEach((item: any, index: number) => {if (`pages/index/${item.pagePath}` == page.route) {activeIndex.value = index}})
}function tabBarChange(url: string, index: number) {uni.switchTab({url})
}
</script>

在页面中引入

<!-- 每个tabbar对应的路由页面，page最好添加 padding-bottom:calc(env(safe-area-inset-bottom) + 24rpx + 50px); 50是设置的tabbar的高度，24是留余的页面空白 --><template><TabBar />
</template>
<script setup lang="ts">import TabBar from '@/components/Tabbar/index.vue'</script>