Uniapp之微信小程序自定义底部导航栏形态

发现微信小程序自带导航栏有些丑，只能改变一下常用图标字体颜色什么的，今天就搞个自定义的tab，效果如下。

一，首先就是配置pages.json文件，必须设置"custom": true,  // 关键配置：启用自定义 tabBar

"list" 里面还是和自带的一样，开始研究设置为空[] 但是运行不起来，提示必须得有之前哪些tab信息。

这是我的测试代码

"tabBar" : {"custom": true,  // 关键配置：启用自定义 tabBar"list" : [{"selectedIconPath" : "static/icons/home-active.png","iconPath" : "static/icons/home.png","pagePath" : "pages/index/index","text" : "首页"},{"selectedIconPath" : "static/icons/add-active.png","iconPath" : "static/icons/add.png","pagePath" : "pages/add/index","text" : "记账"},{"selectedIconPath" : "static/icons/analysis-active.png","iconPath" : "static/icons/analysis.png","pagePath" : "pages/analysis/index","text" : "分析"},{ "selectedIconPath" : "static/icons/mine-active.png","iconPath" : "static/icons/mine.png","pagePath" : "pages/mine/index","text" : "我的"}]}

二、设置 公用 tab 导航页面，新建 components--------custom-tabbar目录 及custom-tabbar.vue文件页面

custom-tabbar.vue 

<template><view class="custom-tabbar"><view class="tabbar-item" v-for="(item, index) in tabList" :key="index"@click="switchTab(item.path)"><!-- 图标 --><view class="icon-wrapper"><image :src="currentPath === item.path ? item.selectedIcon : item.icon" mode="widthFix"class="tabbar-icon"></image></view><!-- 文字 --><text class="tabbar-text":class="{ 'active': currentPath === item.path }">{{ item.text }}</text></view></view>
</template><script>
export default {data() {return {currentPath: '',  // 当前页面路径// 导航栏配置tabList: [{path: '/pages/index/index',text: '首页',icon: '/static/icons/home.png',selectedIcon: '/static/icons/home-active.png'},{path: '/pages/add/index',text: '记账',icon: '/static/icons/add.png',selectedIcon: '/static/icons/add-active.png'},{path: '/pages/analysis/index',text: '分析',icon: '/static/icons/analysis.png',selectedIcon: '/static/icons/analysis-active.png'},{path: '/pages/mine/index',text: '我的',icon: '/static/icons/mine.png',selectedIcon: '/static/icons/mine-active.png'}]}},
created() {// 监听全局路由变化this.routeListener = uni.onAppRoute((res) => {// 路由变化后，延迟获取页面栈（确保页面已切换完成）setTimeout(() => {const pages = getCurrentPages()this.currentPath = "/" + pages[pages.length - 1].routeconsole.log('路由变化，更新路径：', this.currentPath)}, 100)})},beforeDestroy() {// 销毁时移除监听，避免内存泄漏this.routeListener()},methods: {// 切换页面switchTab(path) {// 如果点击的是当前页面，不做操作if (this.currentPath === path) return// 使用 switchTab 跳转（适合 tab 页面）uni.switchTab({url: path})}}
}
</script><style scoped>
.custom-tabbar {display: flex;justify-content: space-around;align-items: center;position: fixed;bottom: 3%;left: 2%;right: 2%;height: 50px;border-radius: 25px;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);z-index: 999;background: #fff;
}.tabbar-item {display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1;
}.icon-wrapper {height: 24px;margin-bottom: 2px;
}.tabbar-icon {width: 24px;height: 24px;
}.tabbar-text {font-size: 12px;color: #2c2c2c;
}.tabbar-text.active {color: #007aff;  /* 选中状态颜色 */
}
</style>

三、引用到所需要的页面即可，举例：index.vue

1,页面部分

<template><view class="container"><!-- 页面内容 --><custom-tabbar></custom-tabbar></view>
</template>

2，js 部分：设置引入页面路径，

<script>
import customTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
export default {components: {customTabbar} 
}
</script>

3，css 部分

.container {padding-bottom: 50px;/* 适配安全区 */padding-bottom: calc(50px + constant(safe-area-inset-bottom));padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

基本完事，可以试试了。