uni-app修炼之路(六)
参考官方文档:https://uniapp.dcloud.io/collocation/pages?id=tabbar
tabBar
tabBar 用来配置导航栏的表现,以及导航切换时显示的对应页。
属性说明:
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色 | ||
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | ||
backgroundColor | HexColor | 是 | tab 的背景色 | ||
borderStyle | String | 否 | black | tabbar 上边框的颜色,可选值 black/white | App 2.3.4+ 支持其他颜色值 |
blurEffect | String | 否 | none | iOS 高斯模糊效果,可选值 dark/extralight/light/none(参考:使用说明) | App 2.4.0+ 支持 |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少2个、最多5个 tab | ||
position | String | 否 | bottom 可选值 bottom、top top 值 | 仅微信小程序支持 | |
fontSize | String | 否 | 10px | 文字默认大小 | App 2.3.4+ |
iconWidth | String | 否 | 24px | 图标默认宽度(高度等比例缩放) | App 2.3.4+ |
spacing | String | 否 | 3px | 图标和文字的间距 | App 2.3.4+ |
height | String | 否 | 50px | tabBar 默认高度 | App 2.3.4+ |
midButton | Object | 否 | 中间按钮 仅在 list 项为偶数时有效 | App 2.3.4+ |
其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
iconPath | String | 否 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 |
midButton 属性说明
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
width | String | 否 | 80px | 中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度 |
height | String | 否 | 50px | 中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果 |
text | String | 否 | 中间按钮的文字 | |
iconPath | String | 否 | 中间按钮的图片路径 | |
iconWidth | String | 否 | 24px | 图片宽度(高度等比例缩放) |
backgroundImage | String | 否 | 中间按钮的背景图片路径 |
midButton没有pagePath
,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap
,详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
注意
- 当设置 position 为 top 时,表示导航栏在顶部,将不会显示 icon
- tabBar 中的 list是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- tabbar切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
- tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar页面,只会触发每个页面的onShow,不会再触发onLoad。
- 顶部的 tabbar目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。
pages.json代码示例:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
//"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/news/news",
"style" : {}
}
,{
"path" : "pages/messages/messages",
"style" : {}
}
,{
"path" : "pages/home/home",
"style" : {}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "社交app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"color":"#ADADAD",
"selectedColor":"#FEE42B",
"borderStyle":"black",
"backgroundColor":"#FFFFFF",
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/tabbar/index.png",
"selectedIconPath":"static/tabbar/indexed.png"
},
{
"pagePath":"pages/news/news",
"text":"动态",
"iconPath":"static/tabbar/news.png",
"selectedIconPath":"static/tabbar/newsed.png"
},
{
"pagePath":"pages/messages/messages",
"text":"消息",
"iconPath":"static/tabbar/messages.png",
"selectedIconPath":"static/tabbar/messagesed.png"
},
{
"pagePath":"pages/home/home,
",
"text":"我的",
"iconPath":"static/tabbar/home.png",
"selectedIconPath":"static/tabbar/homeed.png"
}
]
}
}
tabbar中的icon我是从阿里巴巴iconfont中下载的,不清楚的可以参考我另一篇博客uni-app引入自定义图标库——Iconfont-阿里巴巴,不同之处在于这里的图标不是用代码的方式,而是下载下来,存放在项目的static文件夹下面。
下载选中和未选中时的两种状态的颜色,下载方式:
下载后保存在项目的static目录下。
实现效果: