摘要：小程序的底部标签导航（官方称为tabBar）是小程序中用于快速切换不同页面的重要组件，通常位于页面底部。就像“今日头条”软件底部的“头条”、“视频”、“任务”、“商城”以及“我的”一样。点击不同的标签会切换到对应的页面当中。示意图如下所示。
这是我分享的第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": "注释:启用按需注入"}来源：工控老张