[聚合文章] 小程序中tabBar的使用

1. 首页
2. 聚合文章
3. 文章详情

程序员 2017-11-26 15 阅读

原文链接: http://www.jianshu.com/p/6e76d16fc34b

知晓程序员，专注微信小程序开发的程序员！

今天说说tabBar的使用，先看看官方说法：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

备注：

当设置 position 为 top 时，将不会显示 icon

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

（tabBar图例讲解）

今天在做投一个小程序时，也用到了tabBar，先看一下示例：

为什么没有自己实现tabBar？因为自己实现的tabBar，没有官方的常驻底部的效果好，官方的组件也有限制：不能完全满足自定义需求。比如不支持iconfont图标，也不能展示其他样式风格。

不废话，来看代码吧，代码需要在app.json中进行配置，如下：

"tabBar":{

"color":"#7f8389",

"selectedColor":"#00a8f3",

"borderStyle":"black",

"backgroundColor":"#f7f7fa",

"list":[

{

"pagePath":"pages/index/index",

"text":"新建投票",

"iconPath":"images/create_vote.png",

"selectedIconPath":"images/create_vote_selected.png"

},

{

"pagePath":"pages/square/square",

"text":"投票广场",

"iconPath":"images/square_vote.png",

"selectedIconPath":"images/square_vote_selected.png"

},

{

"pagePath":"pages/myvote/myvote",

"text":"我的投票",

"iconPath":"images/my_vote.png",

"selectedIconPath":"images/my_vote_selected.png"

}

]

}

参数说明：

color：tab 上的文字默认颜色

selectedColor：tab 上的文字选中时的颜色

backgroundColor：tab 的背景色

borderStyle：tabbar上边框的颜色， 仅支持 black/white

position：可选值 bottom、top

注：color颜色请一定写成十六进制颜色，不要用RGB颜色，IOS设备上不识别RGB颜色~

可能会踏的坑：

其他页面，如果需要跳转至带tabBar的页面，必须使用wx.swichTab()，使用wx.navigateTo()和wx.redirectTo()都无效~

----- END -----

往期回顾

1.swiper组件添加左右箭头

2.如何跳出小程序五级页面的限制

3.小程序开放网页功能，你读懂了嘛？

4.小程序风云榜|重要通知、小小签到、微友名片

5.小程序有哪些优势，你都知道嘛？

6.如何确保行政的同学发布的通知，所有人都已查看？

知晓程序员，一个专注于微信小程序开发的程序员~

如果对小程序技术感兴趣，欢迎勾搭连胜老师，微信：13718712821，备注知晓程序员哦，欢迎讨论问题 & 一起探讨小程序人生~~

扫描下方二维码，关注知晓程序员，实时了解小程序动态 & 小程序开发相关内容~