UniApp 自定义微信小程序 TabBar 导航栏

****

在开发微信小程序时，tabBar 是一种常用的底部导航栏组件，它允许用户在不同的页面之间进行切换。UniApp 作为一个跨平台的开发框架，允许开发者使用相同的代码来编译生成多个平台（包括微信小程序、Android、iOS）的应用。UniApp 提供了对 tabBar 的自定义功能，使开发者能够根据需求定制底部导航栏。

本文将介绍如何在 UniApp 中自定义微信小程序的 tabBar 导航栏，并展示代码实现。

一、创建 UniApp 项目

1. 打开 HBuilderX，选择 创建项目。
2. 选择 UniApp 项目，填写项目名称，选择合适的模板（可以选择 Hello UniApp 模板）。
3. 完成项目创建后，打开项目文件夹，找到 pages.json 配置文件。

二、配置 TabBar

在 UniApp 中，tabBar 是通过在 pages.json 文件中进行配置的。默认情况下，UniApp 提供了一个简单的 tabBar 配置，你可以在该配置中修改 tabBar 的颜色、背景图、样式和显示的页面等。

1. 基本结构

tabBar 配置位于 pages.json 中的 tabBar 字段下，包含以下属性：

• color：选项卡文字的颜色。
• selectedColor：选中时文字的颜色。
• backgroundColor：底部导航栏的背景颜色。
• borderStyle：设置导航栏上边框的样式，支持 black 和 white。
• list：底部导航栏的各个 tab 项。

2. 自定义 TabBar 示例

假设我们有三个页面：home、discover 和 profile，我们想要自定义 TabBar，使其更符合设计要求，具体代码如下：

在 pages.json 中的配置：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/discover/discover",
      "style": {
        "navigationBarTitleText": "发现"
      }
    },
    {
      "path": "pages/profile/profile",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#8e8e8e",  // 未选中时字体颜色
    "selectedColor": "#ff6347",  // 选中时字体颜色
    "backgroundColor": "#ffffff",  // 背景颜色
    "borderStyle": "black",  // 上边框颜色
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",  // 图标路径
        "selectedIconPath": "static/tabbar/home_selected.png"  // 选中的图标路径
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "发现",
        "iconPath": "static/tabbar/discover.png",
        "selectedIconPath": "static/tabbar/discover_selected.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "static/tabbar/profile.png",
        "selectedIconPath": "static/tabbar/profile_selected.png"
      }
    ]
  }
}

三、配置自定义 TabBar 图标与样式

1. 准备图标

你可以在 static/tabbar/ 目录下放置相应的图标文件（home.png、discover.png、profile.png）。如果图标需要不同的样式，可以设计两个版本的图标，分别用于选中状态和未选中状态：

• home.png：未选中状态的图标。
• home_selected.png：选中状态的图标。

2. 图标与样式说明

• iconPath：未选中时显示的图标。
• selectedIconPath：选中时显示的图标。

图标建议大小：每个图标的尺寸建议为 40x40px 或 60x60px，并且图标需要放在 static/tabbar/ 目录下。

四、实现 TabBar 的页面逻辑

1. 首页（home.vue）

<template>
  <view>
    <text>首页内容</text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateTo() {
      // 示例方法，点击按钮跳转到其它页面
      uni.navigateTo({
        url: '/pages/discover/discover'
      });
    }
  }
};
</script>

<style scoped>
/* 页面样式 */
</style>

2. 发现页（discover.vue）

<template>
  <view>
    <text>发现内容</text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
/* 页面样式 */
</style>

3. 我的页（profile.vue）

<template>
  <view>
    <text>我的内容</text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
/* 页面样式 */
</style>

五、运行与测试

在 HBuilderX 中，选择 运行 -> 运行到小程序，选择 微信小程序，并通过微信开发者工具进行调试。

你将看到底部导航栏已经被自定义为你设置的样式，并且可以正常在不同页面之间进行切换。

六、总结

通过 pages.json 配置文件，UniApp 提供了一种便捷的方式来自定义微信小程序的 TabBar。你可以自由设置 tabBar 的颜色、图标以及选中状态，并通过添加自定义页面逻辑来丰富整个应用的功能。本文展示了一个简单的自定义 tabBar 的实现，开发者可以根据自己的需求进一步扩展和定制 TabBar 的功能和样式。

希望通过本文的教程，能够帮助你快速上手并实现符合设计需求的自定义 TabBar。