# @mas.io/adc-tab

> @alipay/adc-tab 的组件描述

Latest version **1.0.3** (published 2021-07-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install @mas.io/adc-tab
pnpm add @mas.io/adc-tab
yarn add @mas.io/adc-tab
bun add @mas.io/adc-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-07-01 |
| First published | 2021-07-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 40.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mas-author |
| Maintainers | bingjian.guo |

## Links

- npm: https://www.npmjs.com/package/@mas.io/adc-tab
- npm.io page: https://npm.io/package/@mas.io/adc-tab

## Dependencies (2)

- [mini-ali-ui](https://npm.io/package/mini-ali-ui.md) ^1.3.4
- [@mas.io/falcon-core](https://npm.io/package/@mas.io/falcon-core.md) ^1.0.5

## Recent versions

- 1.0.3 (latest) — 2021-07-01

## README

# 安装
```bash
tnpm install --save @alipay/adc-tab
```

# 组件介绍

行业小程序Tab标签页组件，基于`mini-ali-ui ^1.3.4`的`Tabs 横向选项卡`上做的二次开发。
因此兼容所有`Tabs 横向选项卡`的所有属性和功能，用法也一致（除了elevator模式做了优化）。这一部分内容请查阅[mini-ali-ui文档](https://opendocs.alipay.com/mini/component-ext/tabs)。
本组件在原`Tabs 横向选项卡`组件的基础上增加了以下内容：
* fix: 原tabs组件在胶囊和带描述模式下，自动滚动tab定位出错的bug
* fix: elevator模式的一些bug
* fix: 开启swipeable后的bug
* feature: activeTab始终居中显示，优化体验
* feature: 新增floatTab功能，使tab组件能有一个悬浮态的tab
* feature: 新增header插槽
* refactor: elevator模式的用户使用代码优化


# 新增参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例
--|:--:|:--:|:--:|:--: | :-:
floatTab | 否 | number | 悬浮tab的索引值。大于-1时生效 | -1 | -
tabMoveDelay | 否 | number | 选中一个tab后，会自动将此选中tab移至居中位置，可设置这个过程的延迟时间 | 0 | -


# 新增Slot

Name | 说明 | 是否必传
--|:--:|:--:
header | tab与tab-content之间的固定内容 | 否


# 在小程序中使用

```json
{
  "usingComponents": {
    "adc-tab": "@alipay/adc-tab/es/index"
  }
}
```

在 page.axml 中引用组件

```html
<!-- 页面使用方式 -->
<adc-tab tabsName="activeTab" tabs="{{tabs}}" activeTab="{{activeTab}}" onTabClick="handleTabClick"
  onChange="handleTabChange"></adc-tab>
```

电梯模式使用方法

```html
<view style="height: 300px;background-color: #ccc;">
  <text>有 300px 高度的一个 view</text>
  <navigator url="../index" style="padding-top: 20rpx;" open-type="redirect">点击进入 tabs 选项卡</navigator>
</view>
<view style="padding: 12px;">
  <tabs
    ref="saveRef"
    tabs="{{tabs}}"
    tabsName="activeTab"
    onTabClick="handleTabClick"
    activeTab="{{activeTab}}"
    capsule="{{false}}"
    hasSubTitle="{{false}}"
    showPlus="{{false}}"
    elevator="{{true}}"
    elevatorTop="50px"
  >
    <block a:for="{{tabs}}">
      <tab-content elevator="{{true}}" key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" data-floornumber="{{floorNumber[index]}}" a:if="{{index === 0}}">
        <view class="tab-content" style="height: 300px;background: #e0e0e0;">高度为 300px {{item.title}}</view>
      </tab-content>
      <tab-content elevator="{{true}}" key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" data-floornumber="{{floorNumber[index]}}" a:elif="{{index >= 6}}">
        <view class="tab-content" style="height: 500rpx;background: #feffc9;">改变 tab-content 高度为 300rpx {{item.title}}</view>
      </tab-content>
      <tab-content elevator="{{true}}" key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" data-floornumber="{{floorNumber[index]}}" a:else>
        <view class="tab-content">content of {{item.title}}</view>
      </tab-content>
    </block>
  </tabs>
</view>
<view style="height: 50px;background-color: #ccc;">有 50px 高度的一个 view</view>
```

```javascript
Page({
  data: {
    tabs: [
      {
        title: '1选项选项二选项二选项二',
        subTitle: '描述文案',
        number: '6',
      },
      {
        title: '2选项二',
        subTitle: '描述文案描述',
        number: '66',
      },
      {
        title: '3 Tab',
        subTitle: '描述',
        number: '99+',
      },
      {
        title: '4 Tab',
        subTitle: '描述',
      },
      {
        title: '5 Tab',
        subTitle: '描述描述描述',
      },
      {
        title: '6 Tab',
        subTitle: '描述',
      },
      {
        title: '7 Tab选项二选项二选项二选项二',
        subTitle: '描述',
      },
      {
        title: '8 Tab',
        subTitle: '描述',
      },
    ],
    activeTab: 0,
    contentHeight: 200,
  },
  saveRef(ref) {
    this.ref = ref;
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        activeTab: 7,
      });
      // 电梯模式，如果要通过代码改变activeTab，需要增加一步，调用组件的scrollTo方法
      this.ref.scrollTo(7);
    }, 1000);
  },
  handleTabClick({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },
  onPageScroll(arg) {
    this.ref.handlePageScroll(arg, (num) => {
      this.setData({
        activeTab: num,
      });
    });
  },
});
```

## Badges

[![TNPM version][tnpm-image]][tnpm-url]
[![TNPM downloads][tnpm-downloads-image]][tnpm-url]

[tnpm-image]: https://npm.alibaba-inc.com/badge/v/@alipay/adc-tab.svg
[tnpm-url]: https://npm.alibaba-inc.com/package/@alipay/adc-tab
[tnpm-downloads-image]: https://npm.alibaba-inc.com/badge/d/@alipay/adc-tab.svg

--------------------

---
_Source: https://npm.io/package/@mas.io/adc-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._