7-微信小程序 tabBar导航栏
微信小程序 tabBar 是小程序底部的一个导航栏，用于在不同的页面之间进行切换。下面是一个示例代码，展示如何在微信小程序中使用 tabBar。
在小程序的 app.json 文件中，添加 tabBar 配置项，示例代码如下：
"tabBar": {
"color":"#ccc",
"list": [{
"pagePath": "pages/home/home",
"text":"首页",
"iconPath": "/pages/img/home.png",
"selectedIconPath": "/pages/img/home-active.png"
},
{
"pagePath": "pages/category/category",
"text":"分类",
"iconPath": "/pages/img/category.png",
"selectedIconPath": "/pages/img/category-active.png"
},
{
"pagePath": "pages/contact/contact",
"text":"查天气",
"iconPath": "/pages/img/contact.png",
"selectedIconPath": "/pages/img/contact-active.png"
}
]
},
list：每个导航的代码写入位置
pagePath：导航的文件路径 （在pages中设置）
text：导航的标题
iconPath：导航的矢量图标
selectedlconPath：点击该图标颜色变换的矢量图标文件夹目录
color：导航栏默认的字体颜色
如果在tabBar中加入代码
"position":"top", 导航栏置顶
推荐：阿里矢量图标 https://www.iconfont.cn/ 在里面通过搜索关键字可以找出许多的矢量小图标，
适用于：微信小程序 、web前端
意义：
在微信小程序中，tabBar是一个非常重要的元素，它位于小程序底部，通常用于在不同的页面之间进行切换。
tabBar的主要意义和作用如下：
- 提高操作效率：通过在tabBar上添加不同的选项卡，用户可以快速切换到不同的页面，而无需通过复杂的导航或者搜索操作。这大大提高了用户操作效率。
- 方便用户导航：tabBar可以帮助用户快速找到他们需要的功能页面。在小程序中，一个tab对应一个页面，用户可以通过点击tab直接进入对应的页面，无需手动输入url或者搜索。
- 增强小程序的结构感：通过在底部设置tabBar，可以明确地将内容区域和导航区域分开，使得小程序结构更加清晰，使用户更容易理解和使用。
- 提供一种一致的导航方式：tabBar可以确保用户在所有页面都可以轻松导航，增强了小程序的连贯性和一致性。
- 自定义导航：开发者可以根据自己的需求和设计风格来定制tabBar的样式和功能，使其与整个小程序的设计和主题相匹配。
因此，tabBar在微信小程序中扮演着重要的角色，它不仅方便用户快速切换页面，提高操作效率，还能增强小程序的导航能力和整体结构感。