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