Tabs
标签页板块
标签页板块操作
标签页条目
标签页条目操作
数据双向绑定用法
API
DataStructure
QTTab
用来描述标签页面信息
| Name | Description | Type | Default |
|---|---|---|---|
| defaultIndex | 默认选中的标签的索引 | number | - |
| defaultFocusIndex | 默认焦点的标签的索引 | number | - |
| itemList | 标签条目列表 | Array<QTTabItem> | - |
QTTabItem
用来描述标签条目信息
| Name | Description | Type | Default |
|---|---|---|---|
| text | 标签条目的名称 | string | - |
| titleSize | 标签条目名称的文字大小 | number | - |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| enablePlaceholder | 是否启用占位图 | boolean | false |
| preloadNumber | 预加载板块个数 | number | 3 |
| tabNavBarClass | tabNavBar的样式 | string | - |
| tabClass | tab的样式 | string | - |
| tabPageClass | tab内容的样式 | string | - |
| tabNavBarSid | tabNavBar的Sid | string | - |
| tabsDataStrategy | tab的数据策略 | enum | overTime |
| horizontal | 横向或纵向排布 | boolean | true |
| pageTransform | 页面变换动画 | boolean | true |
| hideOnSingleTab | 只有一个tab的时候隐藏导航栏 | boolean | true |
| floatNavBar | 浮动导航栏 | boolean | true |
| useNavBarBg | 使用导航栏背景 | boolean | true |
| contentNextFocus | 内容的下一个焦点 | object | {up:'tabList',left:'tabList'} |
| triggerTask | 触发任务 | object | [ ] |
| blockViewPager | 拦截tab内容焦点 | object | [ ] |
| blockViewPagerVertical | 拦截tab垂直内容焦点 | object | [ ] |
| tabContentBlockFocusDirections | 拦截焦点的方向 | object | ['down'] |
| tabContentResumeDelay | tab内容恢复延迟时间 | number | 300ms |
| tabContentSwitchDelay | tab导航切换延迟时间 | number | 0 |
| endHintEnabled | 版块内容的到底提示开关 | boolean | true |
| outOfDateTime | 当tabsDataStrategy为overtime时，tab内容缓存时间 | number | 5* 60*1000 |
| customPool | 瀑布版块的缓存池 | object | - |
| customItemPool | 瀑布item的缓存池 | object | - |
| navBarNextFocusName | 导航栏指定nextFocus | object | |
| horizontalFadingEdgeEnabled | 开启横向导航栏谈出效果 | boolean | false |
| verticalFadingEdgeEnabled | 开启纵向导航栏谈出效果 | boolean | false |
| fadingEdgeLength | 导航栏谈出效果长度 | number | 0 |
| speedPerPixel 2.7 | tab切换时的速度 | number | 0 |
| autoHandleBackKey | 是否自动处理back键事件 | boolean | true |
| autoBackToDefault | 按back键时，是否先回到defaultIndex指定的tab上 | boolean | true |
| autoScrollToTop | 按back键时，是否先回到列表头部 | boolean | true |
| useClickMode | tab使用点击切换，而不是焦点时切换内容 | boolean | false |
| firstResumeTaskDelay | 首次加载时页面由pase变为resume的时间 | number | 1000 |
| alphaTransform | tab切换时，是否开启alpha动画 | boolean | false |
| offscreenPageLimit | tab页缓存数,注意数量不要过多，防止内存占用过多（1-N) | number | 1 |
| tabConfig beta | tab配置信息 | object | {defaultFocusIndex: 0,defaultIndex: 0} |
| waterfallConfig beta | tab页下瀑布流的配置信息 | object | {width: 1920, height: 1080} |
| tabs beta | 双向绑定数据集 | Array<IQtTabDatas> | [] |
Events
| Name | Description | Type |
|---|---|---|
| onTabPageLoadData | tab加载数据 | Function |
| onTabPageChanged | tab切换页面 | Function |
| onTabEvent | tab事件 | Function |
| onTabPageItemClick | tab页面item点击事件 | Function |
| onTabPageItemFocused | tab页面item焦点事件 | Function |
| onTabPageSectionAttached | tab页面板块Attached | Function |
| onTabPageScroll | tab页面滚动 | Function |
| onTabPageScrollStateChanged | tab页面滚动状态变化 | Function |
| onTabMoveToTopStart | tab页面开始滚动到顶部 | Function |
| onTabMoveToTopEnd | tab页面结束滚动到顶部 | Function |
| onTabMoveToBottomStart | tab页面开始滚动到底部 | Function |
| onTabMoveToBottomEnd | tab页面结束滚动到底部 | Function |
| onTabChanged | tab导航切换 | Function |
| onTabPageScrollToEnd | tab页面滚动到底部 | Function |
| onTabPageScrollToStart | tab页面滚动到顶部 | Function |
| onTabClick | tab导航点击 | Function |
| onPluginLoadSuccess | tab页面内容插件加载成功 | Function |
| onPluginLoadError | tab页面内容插件加载失败 | Function |
Slots
| Name | Description |
|---|---|
| tab-item | 自定义导航栏item. |
| waterfall-item | 瀑布流flex section中自定义item. |
| waterfall-list-item | 瀑布流list section 中自定义item. |
| waterfall-vue-section | 瀑布流vue section 中内容. |
| waterfall-section | 瀑布流自定义section. |
Exposes
| Name | Description | Type |
|---|---|---|
| initTab | 该方法初始化标签页条目 | Function |
| initPage | 该方法初始化标签页面 | Function |
| setPageState | 该方法设置标签页面状态 | Function |
| getCurrentPageIndex | 该方法获取当前的标签页的索引 | Function |
| setPageData | 该方法设置标签页的数据 | Function |
| addPageData | 该方法向标签页添加数据 | Function |
| updatePageData | 该方法更新标签页的数据 | Function |
| updatePageSection | 该方法更新标签页的板块 | Function |
| deletePageSection | 该方法删除标签页的板块 | Function |
| getPageSection | 该方法获取指定索引标签页的指定索引板块 | Function |
| getPageSectionList | 该方法获取指定标签页的板块列表 | Function |
| getPageItem | 该方法获取指定索引标签页的指定索引板块的指定索引的条目 | Function |
| updatePageItem | 该方法更新指定索引标签页的指定索引板块的指定索引的条目 | Function |
| deletePageItem | 该方法删除指定索引标签页的指定索引板块的指定索引的条目 | Function |
| addPageItemList | 该方法向指定索引标签页的指定索引板块添加条目列表 | Function |
| reloadAll | 该方法重新加载所有的标签页 | Function |
| reloadPage | 该方法重新加载标签页数据 | Function |
| setCurrentPage | 该方法显示指定索引的标签页 | Function |
| scrollToIndex | 滚动到指定位置 | Function |
| startScroll | 开始滚动 | Function |
| setSelectChildPosition | 选中指定位置的条目 | Function |
| scrollToPositionWithOffset | 滚动到指定的位置 | Function |
| scrollToPositionWithOffsetInfiniteMode | 滚动到指定的位置 | Function |
| scrollToPosition | 滚动到指定的位置 | Function |
| refreshListData | 刷新列表数据 | Function |
| updateItemTraverse | 更新条目 | Function |
| requestItemLayout | 条目刷新布局 | Function |
| updateItemRange | 更新条目 | Function |
| insertItemRange | 插入条目 | Function |
| updateItemMatched | 更新条目 | Function |
| updateItemMatchedByKey | 更新条目 | Function |
| deleteItemRange | 删除条目 | Function |
| setListData | 设置列表数据 | Function |
| setListDataWithParams | 设置列表数据 | Function |
| addListData | 添加数据 | Function |
| addListDataWithParams | 添加数据 | Function |
| destroy | 销毁 | Function |
| recycle | 回收 | Function |
| scrollToTop | 滚动到顶部 | Function |
| scrollToFocus | 滚动到焦点 | Function |
| prepareForRecycle | 准备回收 | Function |
| setDisplay | 是否显示 | Function |
| changeDisplayState | 改变显示状态 | Function |
| notifySaveInstance | 请求保存状态 | Function |
| updateItemProps | 更新条目属性 | Function |
| updateItem | 更新条目 | Function |
| dispatchItemFunction | 执行条目方法 | Function |
| clearPostTask | 清空任务 | Function |
| clearPostTaskByCate | 清空任务 | Function |
| clearData | 清空数据 | Function |
| pausePostTask | 暂停任务 | Function |
| resumePostTask | 恢复任务 | Function |
| requestLayoutManual | 手动刷新布局 | Function |
| setSpanCount | 设置格子数量 | Function |
| searchReplaceItem | 请求替换条目 | Function |
| setCustomStateEnableOnFocus | 设置自定义状态在焦点时是否可用 | Function |
| setItemCustomState | 设置条目自定义状态 | Function |
| dispatchItemFunctionWithPromise | 执行条目的方法 | Function |
| getScrollOffset | 获取滚动的偏移量 | Function |