参考文档
微信小程序相关开发文档链接: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 配置代码
c
{
"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代码
c
<template>
<u-tabbar
:value="activeIndex"
fixed
activeColor="#11C0D7"
inactiveColor="#8C8C8C"
>
<u-tabbar-item
v-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代码
c
<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>