配置tabbar
配置tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
1.属性说明
tabBar属性说明如下：
| 属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色 | ||
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色 | ||
| borderStyle | String | 否 | black | tabbar 上边框的颜色，仅支持 black/white | App 2.3.4+ 支持其他颜色值 |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab | ||
| position | String | 否 | bottom | 可选值 bottom、top | top 值仅微信小程序支持 |
tabBar其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
| text | String | 是 | tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
| iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标 |
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
2.案例代码
{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/message/message","style" : {"navigationBarTitleText": "消息"}},{"path" : "pages/news/news","style" : {"navigationBarTitleText": "新闻"}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "有数","navigationBarBackgroundColor": "#ffc0cb","backgroundColor": "#800080","enablePullDownRefresh": true,"backgroundTextStyle": "dark"},"tabBar": {"color": "#007aff","selectedColor": "#ff0000","backgroundColor": "#FFFFFF","borderStyle":"black","list":[{"text":"首页","pagePath":"pages/index/index","iconPath":"static/tabs/home.png","selectedIconPath":"static/tabs/home-active.png"},{"text":"消息","pagePath":"pages/message/message","iconPath":"static/tabs/message.png","selectedIconPath":"static/tabs/message-active.png"},{"text":"新闻","pagePath":"pages/news/news","iconPath":"static/tabs/contact.png","selectedIconPath":"static/tabs/contact-active.png"}]}
}
显示效果：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！