@mas.io/adc-tab-bar NPM

安装

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

@mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago