小程序入门系列之 tabBar：配置、属性与使用详解

小程序入门系列之 tabBar
在微信小程序中，tabBar是一个非常重要的组件，它用于在应用程序中显示tab导航菜单。通过tabBar组件，用户可以方便地切换不同页面或选项卡。以下我们将深入了解小程序中的tabBar。
一、tabBar的属性
tabBar是小程序中的一个全局配置，可以在app.json文件中进行设置。tabBar的属性主要包括以下几种：

1. list：一个数组，用于定义tabBar的各个选项卡。每个选项卡都是一个对象，包含以下属性：

• text：选项卡的文字。
• pagePath：选项卡对应的页面路径。
• iconPath：选项卡的图标的路径。
• selectedIconPath：选项卡被选中时的图标路径。
• badge：数字显示在图标上方的红色小圆点，用于表示未读消息的数量。

1. otherPagePath：非当前页面的路径集合，当用户点击tab切换到其他tab对应的页面时，会在底部显示最近去过的两个页面。最近一次点击的页面路径集合可以在App的App.PagePathSet获取。
   二、使用方式
   下面是一个简单的tabBar的例子：

   {
   "pages": [
   "pages/index/index",
   "pages/logs/logs"
   ],
   "window": {
   "backgroundTextStyle": "light",
   "navigationBarBackgroundColor": "#fff",
   "navigationBarTitleText": "微信接口功能演示",
   "navigationBarTextStyle": "black"
   },
   "tabBar": {
   "list": [
   {
   "text": "首页",
   "pagePath": "./index"
   },
   {
   "text": "我的",
   "pagePath": "./logs",
   "iconPath": "/images/logs.png",
   "selectedIconPath": "/images/logs-active.png",
   "badge": 1
   }
   ]
   }
   }

   在上面的例子中，我们定义了一个包含两个选项卡的tabBar，第一个选项卡对应首页，第二个选项卡对应我的页面。第二个选项卡被选中时，会有一个背景色突出显示。同时，我们设置了第二个选项卡的未读消息数量为1，并在其图标上显示了一个红色小圆点。
   三、注意事项
   在使用tabBar时，需要注意以下几点：
2. tabBar是一个全局配置，对整个小程序都有效。因此，需要在app.json文件中进行配置，而不是在某个页面的json文件中配置。
3. tabBar的list属性是一个数组，每个元素对应一个选项卡。每个选项卡都是一个对象，可以设置不同的属性和值。比如，text属性设置选项卡的文字，pagePath属性设置选项卡对应的页面路径等。