微信小程序之（三）tabBar

最新推荐文章于 2024-01-04 09:18:43 发布

weixin_34357267

最新推荐文章于 2024-01-04 09:18:43 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lazzyk/p/6479252.html

本文详细介绍了小程序TabBar配置项的使用方法，包括tabBar的基本属性设置、样式配置及位置设定等。通过具体属性说明帮助开发者更好地理解如何利用tabBar实现多tab应用，并强调了通过页面跳转或重定向不会显示底部tab栏的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看官方文档如下：

如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

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

属性说明：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	是	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
selectedIconPath	String	是	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px