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].route
        console.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));
}

基本完事，可以试试了。