微信小程序的TabBar是用于在小程序内创建底部导航栏的一种组件。它允许用户在多个页面之间快速切换，提高了用户体验。下面将详细讲解如何配置和使用微信小程序的TabBar。
配置TabBar
{"pages": ["pages/index/index","pages/logs/logs"],"tabBar": {"color": "#000000","selectedColor": "#ff0000","backgroundColor": "#ffffff","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "path/to/icon.png","selectedIconPath": "path/to/selected-icon.png"},{"pagePath": "pages/logs/logs","text": "日志","iconPath": "path/to/icon.png","selectedIconPath": "path/to/selected-icon.png"}]}
}
pages: 这个数组定义了小程序的所有页面路径，TabBar中的页面路径必须包含在这个数组中。
tabBar: 这是TabBar的配置项。
tabar里面的配置项：
color: 未选中时的文字颜色。selectedColor: 选中时的文字颜色。backgroundColor: TabBar的背景色。borderStyle: TabBar上边框的颜色，仅支持 black 和 white。list: 一个数组，每个元素都是一个对象，用于定义每个Tab。pagePath: 页面路径，必须是 pages 数组中的某一项。text: 按钮上的文字。iconPath: 图标路径，不可超过40KB，建议尺寸81px * 81px。selectedIconPath: 选中时的图标路径，与 iconPath 规则相同。
注意事项
路径正确性：确保 pagePath 是有效的，并且已在 pages 数组中声明。
图标大小：建议图标尺寸为 81px * 81px，且文件大小不超过40KB。
最多5个Tab：TabBar最多支持5个Tab。
自定义组件：目前TabBar不支持自定义组件，只能通过配置实现。
动态设置TabBar
在微信小程序中，我们还可以使用API动态设置TabBar的属性，比如设置某个Tab的红点或者未读数字。
// 显示红点
wx.showTabBarRedDot({index: 0 // 第一个Tab
});// 隐藏红点
wx.hideTabBarRedDot({index: 0 // 第一个Tab
});// 设置未读数字
wx.setTabBarBadge({index: 1, // 第二个Tabtext: '5' // 未读数
});// 移除未读数字
wx.removeTabBarBadge({index: 1 // 第二个Tab
});
三、图片资源
关于TabBar图标的选择，需要注意以下几点：
尺寸建议: 81px * 81px。
文件大小: 不超过40KB。
格式: 支持PNG等常见格式。
