Tabbar组件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_33189961/article/details/98621552

这个组件就是实现类似微信客户端最下边的导航栏的效果

引入组件

在 page.json 中引入组件，如果不是自定义的Tabbar则不需要引入，使用原生的即可。

{
  "usingComponents": {
    "自定义组件名": "路径"
  }
}
如下：

{
  "usingComponents": {
    "mp-tabbar": "../../components/tabbar/tabbar"  //../是回到上一级目录
  }
}

使用组件

在app.json中直接使用，不要额外在wxml声明了

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "icons/iconHome01.png",
        "selectedIconPath": "icons/iconHome02.png"
      },
      {
        "pagePath": "pages/extend/extend",
        "text": "扩展",
        "iconPath": "icons/extend01.png",
        "selectedIconPath": "icons/extend02.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icons/mine01.png",
        "selectedIconPath": "icons/mine02.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