安装

tnpm install --save @alipay/mas-elevator-tabs

组件介绍

行业小程序电梯组件，使用方式简单灵活，支持动态设置tabs内容。

为避免监听页面级别的scroll事件，此组件为全屏容器组件，页面内容区需渲染在容器内部，可以使用css覆盖子项样式，电梯各项高度计算依赖子项高度，应避免给默认容器设置margin。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: containerClassName | false | string | 容器类名 | --- | -- contentClassName | false | string | 电梯内容区类名 | --- | -- tabs | true | Array | 支持自定义任何类型，若未使用tab-item插槽，tab会渲染item的title属性 | --- | -- tabAnchorGap | false | number/string | tab锚点间距，number类型自动单位为rpx，string类型不转换 | --- | -- contentScrollWithAnimation | false | bool | 点击锚点切换内容是否展示滚动动画 | false | -- contentScrollDuration | false | number | 点击锚点内容区滚动动画时长 | --- | -- anchorScrollWithAnimation | false | bool | tab锚点切换是否展示滚动动画 | false | -- anchorScrollDuration | false | number | tab锚点切换是否展示滚动动画时长 | --- | -- onTabClick | false | function | 点击tab触发 {index,item} | false | -- onTabChange | false | function | 激活tab位置变化时触发,参数(activeIndex,type),type为click/scroll | false | -- onStickyChange | false | function | 吸顶变化触发 {sticky} | --- | -- isInitialAnchorFixed | false | bool | 是否初始锚点吸顶，用于电梯tab一直吸顶的情况，避免初始锚点抖动 | false | -- showAnchorShadow | false | bool | 是否展示锚点半透明提示用户可以滚动，默认展示 | true | -- onElevatorAppear | false | function | 电梯首次appear触发，必须tabs有值 | false | -- defaultActiveIndex | false | number | 默认激活tab | - | 1

插槽

属性 | 必填 | 说明 | 默认值 --|:--:|:--:| :-: default | 是 | 作用域插槽，tab内容区自定义渲染，tabs列表tabItem和tabIndex参数 | -- tab-item | 否 | 作用域插槽，tab锚点自定义渲染，tabs列表tabItem、tabIndex、active参数，不传默认渲染列表item的title | -- before | false | 头部插槽电梯上部 | -- after | false | 底部插槽电梯下部 | -- extra | false | 额外插槽，可以处理一些特殊需求，比如背景图等 | --

api

• scrollTo: 滚动至指定位置，单位px

在小程序中使用

{
  "usingComponents": {
    "mas-elevator-tabs": "@alipay/mas-elevator-tabs/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<elevator-tabs containerClassName="container" tabs="{{tabs}}">
  <!--tab上部-->
  <view slot="before" class="before">
    这里是头部插槽
  </view>
  <!--可通过tab-item的插槽自定义tab的渲染，默认是渲染tabs的title-->
  <view slot="tab-item" slot-scope="props">custom{{props.item.title}}{{props.index+1}}</view>
  <!-- 电梯内容区-->
  <view slot-scope="props" class="tab-content">
    <view class="title">{{props.item.title}}</view>
    <view class="item" a:for="{{props.item.list}}">
      {{item.name}}
    </view>
  </view>
  <!--tab底部-->
  <view slot="after" class="after">
    这里是底部插槽
  </view>
</elevator-tabs>

Badges

[![install size][install-size-image]][install-size-url]