安装

tnpm install --save @alipay/mas-tab-list

组件介绍

tab切换，分页加载组件 支持吸顶

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: tabs | 是 | Array | tab切换栏类目 [{ title: string, id: any }, ...] | [] | -- onLoadData | 是 | Function | 指定类目的数据请求; params:{activeTab: number, pageSize: number, current: number, extraData(详细内容见下文“extraData”): object}; return: { total(数据总数): number, list(数据): Array, hasMore(分页数据结束标志；可无；true 还有数据，false 已无数据；当不存在时 组件会根据 total 数据判断): boolean } | -- | -- pageSize | 否 | Number | 分页请求每页条数 | 10 | -- transparentSticky | 否 | Boolean | 是否兼容页面通底时的吸顶（页面"transparentTitle": "auto" 时需设置） | false | -- getTabBarTop(ref调用方法) | 否 | Function | 页面高度发生变化时 重新获取tab到页面顶部的高度 通过 ref 方式调用 | -- | -- resetData(ref调用方法) | 否 | Function | 清空当前tab数据，重新触发一次onLoadData | -- | -- onTabClick | 否 | Function | 切换tab时触发，返回当前tab下标 | -- | -- isClickSticky | 否 | Boolean | tab点击切换时是否需要吸顶 | true | -- onStickyStatus | 否 | Function | 返回是否吸顶状态 | -- | -- classContainer | 否 | string | 最外层自定义样式名 | '' | --

extraData

extraData: { currentTabData: [], // 当前tab类目总数据 }

注意

需在page中 注册事件：

onReachBottom() { // 空function },

onPageScroll() { // 空function },

onLoadData 请求出错时 请抛出 Promise reject()

Slot

Name|说明|是否必传 --|:--:|:--: tab-list-data|当前类目list自定义内容|是 tab-list-empty|当前类目数据为空时自定义展示|否

在小程序中使用

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

在 page.axml 中引用组件

<!-- 页面使用方式 -->
 <mas-tab-list
    tabs="{{tabsData}}"
    ...
  >
    <view 
      slot="tab-list-data"
      slot-scope="props"
    >
      <block a:for="{{props.data}}">
        <view class="item">{{item.appName}}</view>
      </block>
    </view>
  </mas-tab-list>

Badges

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