@mas.io/mas-elevator-tabs NPM

安装

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

@mas.io/any-style @mas.io/falcon-core

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

1.0.0

2 years ago