底部导航 Tabbar

底部导航  Tabbar

"tabBar":{
    "color": "#666666",
    "selectedColor": "#FFB448",
    "borderStyle": "white",
    "backgroundColor": "#fafafa",
    "list":[
        {
          "text":"萌宠圈",
          "pagePath":"pages/index/index",
          "iconPath":"image/tabbar_moments_nor.png",
          "selectedIconPath": "image/tabbar_moments_sel.png"
        },
        {
          "text":"商城",
          "pagePath":"pages/index/index",
          "iconPath":"image/tabbar_shop_nor.png",
          "selectedIconPath": "image/tabbar_shop_sel.png"
        },
        {
          "text": "我的",
          "pagePath":"pages/index/index",
          "iconPath": "image/tabbar_me_nor.png",
          "selectedIconPath": "image/tabbar_me_sel.png"
        }
      ]

属性列表

属性 类型 默认值 必填 说明
ext-class string   添加在组件内部结构的class,可用于修改组件内部的样式
list array<object>   Tabbar的项的数组,按照规范,至少要有2个Tabbar项
current number 0 当前选中的Tabbar项的下标
bindchange eventhandler   Tabbar项发生改成的时候触发此事件,detail为{index, item},index是Tabbar下标,item是对应的Tabbar项的配置

 

 

list属性是对象数组,每一项表示一个Tabbar项,其字段含义为

字段名 类型 默认值 必填 说明
text string   Tabbar项的标题
iconPath string   Tabbar项的icon图片路径,建议使用绝对路径,相对路径要相对于组件所在目录的。
selectedIconPath string   Tabbar项选中时的icon,建议使用绝对路径,相对路径要相对于组件所在目录的。
badge string   是否显示Tabbar的右上角的Badge

 

 

上一篇:小程序导航的应用


下一篇:【H5】底部tabbar按钮切换图标高亮显示