配置tabBar:设置顶部或底部菜单栏(对若干一级页面的入口连接)

当顶部或者底部需要菜单栏时,我们可以通过设置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"
  }
}
}

你可能感兴趣的:(配置tabBar:设置顶部或底部菜单栏(对若干一级页面的入口连接))