配置tabBar：设置顶部或底部菜单栏（对若干一级页面的入口连接）

最新推荐文章于 2023-03-21 11:53:21 发布

原创最新推荐文章于 2023-03-21 11:53:21 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何在小程序中配置TabBar，通过设置list数组来创建底部或顶部菜单，至少包含2个，最多5个tab。每个tab是一个包含多个属性的对象，以此实现一级页面的入口链接导航。

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

当顶部或者底部需要菜单栏时，我们可以通过设置tabBar快速实现。

属性	类型	必填	默认值	描述
color	HexColor	是		tab上的文字默认色，仅支持十六进制色值（HexColor）
selectedColor	HexColor	是		tab上文字选中时的颜色，仅支持HexColor
backgroundColor	HexColor	是		tab背景色，仅支持HexColor
borderStyle	string	否		black
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否		bottom tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，最低版本2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片相对路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片相对路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

示例代码：

{
{
  "pages": [
    "film/weekly/weekly"
  ],
  "tabBar":{
    "color":"#000000",
    "selectedColor": "#ff7f50",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list":[
      {
        "iconPath":"/images/icons/home.jpg",
        "selectedIconPath":"/images/icons/home-selected.jpg",
        "pagePath":"film/index/index",
        "text":"首页"

      },
      {
        "iconPath":"/images/icons/search.png",
        "selectedIconPath":"/images/icons/search-selected.png",
        "pagePath":"film/weekly/weekly",
        "text":"搜索"

      }
      
    ],
    "position":"bottom"
  }
}
}