小程序自定义 tab bar 开发实战：打造个性化底部导航栏

目录

小程序自定义 tab bar 开发实战：打造个性化底部导航栏

一、案例效果展示

二、开发步骤拆解

三、总结

---

在小程序开发中，自定义 tab bar 能够极大地提升用户体验，为应用增添独特的交互效果。今天，我们就以一个综合案例 “自定义 tab bar” 为例，详细探讨其实现过程，涉及自定义组件、vant 组件库、数据共享、组件样式隔离等多个关键知识点。

一、案例效果展示

在我们的小程序中，底部的 tab bar 并非系统默认样式，而是通过自定义渲染实现的。其中，“消息” 选项的右上角设有数字徽标，该徽标数值会与页面上方按钮操作产生的数据变化同步。例如，点击 “number a 加一” 按钮，页面上的 sum 值会增加，同时消息 tab bar 的数字徽标也会相应变化，减一操作同理。这一效果实现的关键在于全局数据共享，确保 tab bar 数字与 sum 值实时同步。

二、开发步骤拆解

实现自定义 tab bar 主要分为三大步：配置信息、添加代码文件、编写 tab bar 代码，下面我们结合代码详细讲解。

1. 配置信息：在小程序的全局配置文件app.json中，找到tabBar节点进行配置。

{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "path/to/icon1.png",
        "selectedIconPath": "path/to/selectedIcon1.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "path/to/icon2.png",
        "selectedIconPath": "path/to/selectedIcon2.png"
      },
      // 其他tab配置项
    ]
  }
}

这里需要注意，虽然我们开启了自定义 tab bar（custom: true），但list数组必须完整保留。一方面是为了兼容低版本客户端，在自定义 tab bar 不生效时，小程序会读取list进行默认渲染；另一方面，list可用于区分哪些页面是 tab 页，方便小程序进行页面管理。
2. 添加 tab bar 代码文件：在项目根目录下创建固定结构的文件夹custom-tab-bar，并在其中创建index组件。小程序在检测到tabBar.custom为true时，会自动读取该组件用于渲染 tab bar。
3. 编写 tab bar 代码：在custom-tab-bar/index组件的wxml文件中，编写 tab bar 的结构。

<view class="custom-tab-bar">
  <block wx:for="{
  
  {tabList}}" wx:key="index">
    <view class="tab-item {
  
  {item.pagePath === currentPage ? 'active' : ''}}" bindtap="switchTab" data-path="{
  
  {item.pagePath}}">
      <image src="{
  
  {item.pagePath === currentPage ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{
  
  {item.text}}</text>
      <!-- 消息徽标显示 -->
      <view wx:if="{
  
  {item.text === '消息' && showBadge}}" class="badge">{
  
  {badgeNum}}</view>
    </view>
  </block>
</view>

在wxss文件中，设置 tab bar 样式。

.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tab-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tab-item image {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}
.tab-item.active {
  color: #1aad19;
}
.badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  background-color: #f0ad4e;
  color: #fff;
  font-size: 10px;
  text-align: center;
}

在js文件中，处理 tab 切换逻辑，并实现数据共享与徽标更新。

Component({
  properties: {
    tabList: {
      type: Array,
      value: []
    },
    currentPage: {
      type: String,
      value: ''
    },
    showBadge: {
      type: Boolean,
      value: false
    },
    badgeNum: {
      type: Number,
      value: 0
    }
  },
  methods: {
    switchTab(e) {
      const path = e.target.dataset.path;
      wx.switchTab({
        url: path
      });
    }
  }
});

在页面中使用该组件时，需传递相应数据。

<custom-tab-bar tabList="{
  
  {tabBarList}}" currentPage="{
  
  {currentPage}}" showBadge="{
  
  {showBadge}}" badgeNum="{
  
  {badgeNum}}"></custom-tab-bar>

Page({
  data: {
    tabBarList: [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "path/to/icon1.png",
        "selectedIconPath": "path/to/selectedIcon1.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "path/to/icon2.png",
        "selectedIconPath": "path/to/selectedIcon2.png"
      },
      // 其他tab配置项
    ],
    currentPage: 'pages/index/index',
    showBadge: true,
    badgeNum: 0
  },
  onLoad() {
    // 监听sum值变化，更新徽标数值
    const that = this;
    // 假设sum值在全局数据中，这里模拟获取与监听
    const globalData = getApp().globalData;
    const sumWatcher = globalData.$watch('sum', (newVal) => {
      that.setData({
        badgeNum: newVal
      });
    });
  }
});

三、总结

通过以上步骤，我们成功实现了小程序自定义 tab bar，并实现了数字徽标与页面数据的同步。在实际开发中，还可以结合 vant 组件库丰富界面样式，利用数据共享机制优化数据传递，通过组件样式隔离确保样式不冲突。希望这篇文章能帮助你在小程序开发中灵活运用自定义 tab bar，打造出更具个性化的应用。