这是我分享的第3个微信小程序开发学习笔记！资深老电工自学小程序开发,每天记录自己的学习心得，免费分享。

一：什么是底部标签导航

(需要本章源码请评论区回复“源码”)小程序的底部标签导航（官方称为tabBar）是小程序中用于快速切换不同页面的重要组件，通常位于页面底部。就像“今日头条”软件底部的“头条”、“视频”、“任务”、“商城”以及“我的”一样。点击不同的标签会切换到对应的页面当中。示意图如下所示。

二：微信小程序中底部标签导航的用法

(需要本章源码请评论区回复“源码”)在app.json中通过tabBar对象配置，需定义list数组指定每个标签的路径、文字、图标等。代码举例如下所示。支持最多5个标签，需设置未选中/选中状态的颜色和图标。

"tabBar": {
"color": "#8A8C95",
"selectedColor": "#2980B9",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home_active.png"
}
]
}

三：仿造今日头条软件底部标签导航

(需要本章源码请评论区回复“源码”)如上方动态图片所示，是仿造的今日头条的底部标签导航动态效果。接下来，一起看一下如何实现上方的底部标签导航效果。

首先，在app.json内写入下方代码，对tabBar进行设置，其次需要把准备好的图标放到项目当中。如代码中的"iconPath": "images/bar/news-0.png"，就是未选中时的图标。

{
  "pages": [
    "pages/news/news",
    "pages/video/video",
    "pages/task/task",
    "pages/store/store",
    "pages/me/me"
  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#D53E37",
    "navigationBarTitleText": "今日头条",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "selectedColor": "#D53E37",
    "backgroundColor": "#F5F5F5",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/news/news",
        "text": "头条",
        "iconPath": "images/bar/news-0.png",
        "selectedIconPath": "images/bar/news-1.png"
      },
      {
        "pagePath": "pages/video/video",
        "text": "视频",
        "iconPath": "images/bar/video-0.png",
        "selectedIconPath": "images/bar/video-1.png"
      },
      {
        "pagePath": "pages/task/task",
        "text": "任务",
        "iconPath": "images/bar/task-0.png",
        "selectedIconPath": "images/bar/task-1.png"
      },
      {
        "pagePath": "pages/store/store",
        "text": "商城",
        "iconPath": "images/bar/store-0.png",
        "selectedIconPath": "images/bar/store-1.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "images/bar/me-0.png",
        "selectedIconPath": "images/bar/me-1.png"
      }
    ]
  },
  "lazyCodeLoading": "requiredComponents",
  "_comment": "注释:启用按需注入"
}