Tabs

最低支持SDK版本2.1

属性

属性	类型	默认值	必填	说明
:hideOnSingleTab	Boolean	false	否	当顶部只有一个tab时是否隐藏
:dataStrategy	String	oneShot	否	设置Tabs数据缓存机制，包括'oneShot'，'always'，'overTime'
:suspension	Boolean	false	否	是否开启吸顶
:suspensionHideOffset	Int	0.1	否	触发吸顶高度相对于tv-list高度的比例系数
:outOfDateTime	String	5 * 60 * 1000	否	缓存数据过期时间
:singlePageMode	Boolean	false	否	是否开启单Page模式
:alwaysShowLoading	Boolean	false	否	单Page模式下切换页面是否显示loading（不影响缓存机制）
:loadingItemType	Int	-1	否	指定loadingView的类型，需要在content中的tv-list定义样式，只在单Page下生效，多Page下需要配置在<recycler-view-pager>上
:blockFocusDirections	Array	无	否	在某个方向锁住焦点
:pageSwitchDelay	Int	300	否	切换页面时的展示延迟，单位：ms
:autoBackToDefault	Boolean	true	否	焦点在顶部tab时按下返回键焦点是否回到默认位置
:preloadItemNumber	Int	0	否	列表触发“loadMore”的提前量（参考tv-list）

dataStrategy属性参数说明:
  'oneShot'：使用缓存，只在第一次加载时刷新；
  'always'：不使用缓存，每次加载都刷新；
  'overTime'：使用缓存，超过一定时间刷新；

方法

setTabsData(param,data)

设置tab数据；

参数名	类型	说明
param	Map	tab初始化时需要的参数，如默认位置:defaultIndex:0，默认焦点位置:defaultFocus:0
data	Array	每个tab的具体内容（参考tv-list的用法）

setPageData(pageIndex,params,pageData)

设置Tabs某一页的数据；

参数名	类型	说明
pageIndex	Int	要设置页面的index，从0开始
params	Map	content中tv-list需要配置的属性，目前支持的属性：disableScrollOnFirstScreen:true（解释详见tv-list组件）
pageData	Array	content每页tv-list列表展示的数据

setCurrentPage(page)

切换到指定页；

参数名	类型	说明
page	Int	要切换到的页面index，从0开始

invokeContentFunction(pageIndex,functionName,param)

设置某一页tv-list调用UI函数更新并进行回调。(单Page模式下无效)

参数名	类型	说明
pageIndex	Int	要设置页面的index，从0开始
functionName	String	方法名
param	Object	参数

事件

load-page

设置数据回调接口，<recycler-view-pager>通知前端获取某一页数据，前端通过setPageData()来更新数据

参数名	类型	说明
pageIndex	Int	当前页面的index
data	Map	当前页面的对应Tab数据

示例：

点击查看源码

<tabs class="tabs_root" ref="tabs"
      @load-page="onLoadPageData">
</tabs>

点击查看源码

methods:{
    onLoadPageData(evt) {
        const pageIndex = evt.pageIndex;
        this.$refs.tabs.setPageData(pageIndex, {}, this.tabsData);
    }
}

tab-event

顶部tab通用回调事件接口

参数名	类型	说明
eventName	String	回调方法名
params	Map	参数

eventName参数枚举：

onMoveToTopStart:吸顶开始回调

onMoveToTopEnd:吸顶结束回调

onMoveToBottomStart:恢复吸顶开始回调

onMoveToBottomEnd:恢复吸顶结束回调

onTabChanged:tab焦点切换时回调

params参数枚举：

itemPosition:tab当前选中位置 data:当前页面的对应Tab数据

示例：

点击查看源码

<tabs class="tabs_root" ref="tabs"
      @tab-event="onTabsEvent">
</tabs>

点击查看源码

methods:{
    onTabsEvent(evt) {
        switch (evt.eventName) {
            case 'onMoveToTopStart':
            //吸顶开始

            break;
            case 'onMoveToTopEnd':
            //吸顶结束

            break;
            case 'onMoveToBottomStart':
            //恢复吸顶开始

            break;
            case 'onMoveToBottomEnd':
            //恢复吸顶结束

            break;
            case 'onTabChanged':
            //tab切换
            const itemPosition = e.params.itemPosition;
            break;
        }
    }
}

page-changed

<recycler-view-pager>切换页面时回调（单Page模式下失效，可使用onTabsEvent回调）

参数名	类型	说明
pageIndex	Int	当前选中页面
data	Map	当前页面的对应Tab数据

示例：

点击查看源码

<tabs class="tabs_root" ref="tabs"
      @page-changed="onPageChanged">
</tabs>

点击查看源码

methods:{
    onPageChanged(evt) {
        const pageIndex = evt.pageIndex;
    }
}

scroll-to-start

content中列表滑动到顶部回调（横向滑动时：到最左时回调）

参数名	类型	说明
pageIndex	Int	当前选中页面

示例：

点击查看源码

<tabs class="tabs_root" ref="tabs"
      @scroll-to-start="onScrollToStart">
</tabs>

点击查看源码

methods:{
    onScrollToStart(evt) {
        const pageIndex = evt.pageIndex;
    }
}

scroll-to-end

content中列表滑动到底部回调（横向滑动时：到最右时回调）

参数名	类型	说明
pageIndex	Int	当前选中页面

示例：

点击查看源码

<tabs class="tabs_root" ref="tabs"
      @scroll-to-end="onScrollToEnd">
</tabs>

点击查看源码

methods:{
    onScrollToEnd(evt) {
        const pageIndex = evt.pageIndex;
    }
}

load-more

content中列表加载更多回调

参数名	类型	说明
pageIndex	Int	当前选中页面

示例：

点击查看源码

<tabs class="tabs_root" ref="tabs"
      @load-more="onLoadMore">
</tabs>

点击查看源码

methods:{
    onLoadMore(evt) {
        const pageIndex = evt.pageIndex;
    }
}