安装

tnpm install --save @alipay/adc-tab-bar

组件介绍

能力中心小程序标签栏组件，支持2种标签栏格式，可自定义style，支持点击标签跳转拦截事件。 使用时也需要在app.json中设置tabBar:{}。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: className | 否 | string | 自定义样式 | - | height:2px;color:red; topLineStyle | 否 | string | 自定义TabBar border-top样式 | - | height:2px;color:red; color | 否 | string | 未选中字体颜色 | #888888 | #fe8b1e; selectedColor | 否 | string | 选中字体颜色 | #fe8b1e | #fe8b1e; bgColor | 否 | string | 背景颜色 | #ffffff | #fe8b1e; fontSize | 否 | string | 字体大小 | 24rpx | 26rpx; onChangeTabBar | 否 | Function | 标签跳转拦截事件，需返回 true / false | null | ()=>{return true}; onCallBack | 否 | Function | 组件加载后的回调事件，返回组件高度单位px | null | ()=>{return { height: 99px }}; tabBarList | 是 | Array | 标签列表 | [] | []

tabBarList参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: pagePath | 是 | string | 页面路径 | - | /pages/tabbar/tabbar1 navigateType | 是 | string | 跳转方式, 若为switchTab跳转需要在app.json里的tabBar中声明 | switchTab | '' showBig | 是 | Boolean | 是否显示凸出的图标 | false | true iconStyle | 是 | Boolean | ICON的style样式 | '' | 'width: 60px' iconPath | 是 | string | 默认Icon链接 | '' | '/static/tabbar-img/icon1.png' selectedIconPath | 是 | string | 选中时Icon链接 | '' | '/static/tabbar-img/icon1_1.png' text | 是 | string | 文本名称 | '' | '首页' num | 是 | string | 图标右上角徽标的内容 | '' | 2 dot | 是 | Boolean | 是否显示图标右上角小红点 | false | true

onChangeTabBar使用说明

onChangeTabBar标签跳转拦截事件，支持2种模式调用，同步任务和异步任务。

同步任务

onChangeTabBar(e) {
  if(e.index === 2){
    // 返回false阻止tabbar跳转事件继续往下执行
    return false;
  }
}

异步任务

onChangeTabBar(e) {
  return new Promise((resolve) => {
    if (e.index === 2) {
      my.confirm({
        title: '提示',
        content: '你还未登录，确定要跳转吗？',
        success: res => {
          if (res.confirm) {
            resolve(true);
          } else {
            resolve(false);
          }
        },
      });
    } else {
      resolve(true);
    }
  });
}

在小程序中使用

{
  "usingComponents": {
    "mas-adc-tab-bar": "@alipay/adc-tab-bar/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
 <adc-tab-bar tabBarList="{{tabBar}}" selectedColor="{{selectedColor}}"
    onChangeTabBar="onChangeTabBar">
</adc-tab-bar>

Badges