@mas.io/adc-tab v1.0.3

安装

tnpm install --save @alipay/adc-tab

组件介绍

行业小程序Tab标签页组件，基于mini-ali-ui ^1.3.4的Tabs 横向选项卡上做的二次开发。 因此兼容所有Tabs 横向选项卡的所有属性和功能，用法也一致（除了elevator模式做了优化）。这一部分内容请查阅mini-ali-ui文档。 本组件在原Tabs 横向选项卡组件的基础上增加了以下内容：

• fix: 原tabs组件在胶囊和带描述模式下，自动滚动tab定位出错的bug
• fix: elevator模式的一些bug
• fix: 开启swipeable后的bug
• feature: activeTab始终居中显示，优化体验
• feature: 新增floatTab功能，使tab组件能有一个悬浮态的tab
• feature: 新增header插槽
• refactor: elevator模式的用户使用代码优化

新增参数说明

新增Slot

在小程序中使用

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

在 page.axml 中引用组件

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

电梯模式使用方法

<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>

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