任务6 tabBar导航
任务描述
实现tabBar导航添加，完成导航菜单项的图标设置。
1）通过编辑app.json内容，实现tabBar导航添加。
2）配置导航菜单项的页面路径。
3）配置导航菜单项的图标。
操作步骤
1 打开utils/app.json文件，把“pages”项内的“"pages/index/index"”调整到第一行，实现首页为pages/index/index的效果，如图1-38所示。
2 在utils/app.json文件中，添加：
在pages/index/index页面中生成了底部导航，如图1-39所示。
图1-38 实现首页为pages/index/index的效果
图1-39 生成了底部导航
经验分享
在app.json中输入tabBar的所有代码并保存，正常情况下，在模拟器中就会看到菜单呈现出来。如果底部导航的菜单不能显示出来，则可以尝试暂时把“"style": "v2"”这一行命令删除，再保存调试，等看到模拟器中的菜单呈现出来后，再恢复删除的代码。
3 在utils/app.json文件的tabBar的list中增加一项：
保存后，页面的底部导航增加了一项“图片浏览”，如图1-40所示。
图1-40 底部导航增加了一项“图片浏览”
4 复制home1.png、home2.png、log1.png、log2.png、watch1.png、watch2.png等图片文件到项目的images文件夹中，如图1-41所示。
5 打开app.json文件，在“首页”下添加两行代码：
其中，iconPath的作用是定义菜单项的图标文件为images/home1.png；selectedIconPath的作用是当菜单项选中时，显示的图标为images/home2.png，如图1-42所示。
图1-41 复制图片文件到项目的images文件夹中
图1-42 显示的图标为images/home2.png
6 打开app.json文件，在“日志”下添加两行代码：
在“图片浏览”下添加两行代码：
为“日志”“图片浏览”菜单项配置对应的图标，如图1-43所示。
图1-43 为菜单项配置对应的图标
7 单击“日志”后，显示pages/logs/logs页面内容，如图1-44所示。
图1-44 显示pages/logs/logs页面内容
8 单击“图片浏览”后，显示pages/center/index页面内容，如图1-45所示。
图1-45 显示pages/center/index页面内容
知识链接
实现tabBar导航设置，代码编辑在app.json内进行。
tabBar导航需要设置的值，常用的有pagePath、text、iconPath、selectedIconPath。其中，pagePath设置跳转的路径，text设置菜单项的文字，iconPath设置菜单项未被选中时的图标，selectedIconPath设置菜单项被选中时的图标。