为什么要使用自定义tabBar
- 使用更加灵活，比如将图标设置为iconfont而非图片
- 设置未读提醒的样式
usage
- 第一步：在app.js(taro在 app.config.js)中配置如下：
tabBar: {
custom: true,
color: "#7A7E83",
selectedColor: "#288DFA",
borderStyle: "black",
backgroundColor: "#F5F6F8",
list: [
{
pagePath: "pages/index/index",
iconPath: "assets/image/index-unselect.png",
selectedIconPath: "assets/image/index-selected.png",
text: "组件",
},
{
pagePath: "pages/userInfo/index",
iconPath: "assets/image/my-unselect.png",
selectedIconPath: "assets/image/my-selected.png",
text: "我的",
},
],
}
- 第二步将将pagePath对应的页面创建完毕，并在app.js的pages进行配置
- 第三步将iconPath进行配置。以上为兼容低版本的配置，微信要求必须配置
- 第四步在tabBar配置中加入 custom: true, 代表启用自定义配置项
- 第五步在根目录(taro在src目录下)创建custom-tab-bar目录，创建index.jsx页面即可。
- 避坑：如果采用state作为选中状态不生效时，可使用当前路径进行选中判断。
