知晓程序员,专注微信小程序开发的程序员!
今天说说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.如何确保行政的同学发布的通知,所有人都已查看?
知晓程序员,一个专注于微信小程序开发的程序员~
如果对小程序技术感兴趣,欢迎关注知晓程序员哦,欢迎讨论问题 & 一起探讨小程序人生~~