@mas.io/mas-tabs-list NPM

安装

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

组件介绍

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

参数说明

属性	必填	参数类型	参数说明	默认值	示例
tabs	是	Array	tab切换栏类目 { title: string, id: any }, ...	[]	--
onLoadData	是	Function	指定类目的数据请求; params:{activeTab: number, pageSize: number, current: number}; return: { total(数据总数): number, list(数据): Array }	--	--
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	最外层自定义样式名	''	--

注意

需在page中注册事件：

onReachBottom() { // 空function },

onPageScroll() { // 空function },

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

Slot

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

在小程序中使用

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

在 page.axml 中引用组件

<!-- 页面使用方式 -->
 <mas-tabs-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-tabs-list>