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