标签页 Tabs

标签页基本数据结构

QTTab

用来描述标签页面信息

参数	描述	类型	必填
defaultIndex	默认选中的标签的索引	`number`	是
defaultFocusIndex	默认焦点的标签的索引	`number`	否
itemList	标签条目列表	`Array<QTTabItem>`	是

QTTabItem

用来描述标签条目信息

参数	描述	类型	必填
text	标签条目的名称	`string`	是
titleSize	标签条目名称的文字大小	`number`	是

标签页接口

QTITab用来描述标签页的接口

initTab

完整方法声明：function initTab(tab: QTTab): void
该方法初始化标签页条目。

initPage

完整方法声明：function initPage(waterfall: QTTabPage): void
该方法初始化标签页面。

setPageState

完整方法声明：function setPageState(pageIndex: number, state: QTTabPageState): void
该方法设置标签页面状态。

getCurrentPageIndex

完整方法声明：function getCurrentPageIndex(): number
该方法获取当前的标签页的索引。

setPageData

完整方法声明：function setPageData(pageIndex: number, tabPage: QTTabPageData): void
该方法设置标签页的数据。

addPageData

完整方法声明：function addPageData(pageIndex: number, tabPageData: QTTabPageData, deleteCount: number): void
该方法向标签页添加数据。

updatePageData

完整方法声明：function updatePageData(pageIndex: number, tabPageData: QTTabPageData): void
该方法更新标签页的数据。

updatePageSection

完整方法声明：function updatePageSection(pageIndex: number, sectionIndex: number, section: QTWaterfallSection): void
该方法更新标签页的板块。

deletePageSection

完整方法声明：function deletePageSection(pageIndex: number, sectionIndex: number, count: number): void
该方法删除标签页的板块。

getPageSection

完整方法声明：function getPageSection(pageIndex: number, sectionIndex: number): QTWaterfallSection | undefined
该方法获取指定索引标签页的指定索引板块。

getPageSectionList

完整方法声明：function getPageSectionList(pageIndex: number): Array<QTWaterfallSection>
该方法获取指定标签页的板块列表。

getPageItem

完整方法声明：function getPageItem(pageIndex: number, sectionIndex: number, itemIndex: number): QTWaterfallItem | undefined
该方法获取指定索引标签页的指定索引板块的指定索引的条目。

updatePageItem

完整方法声明：function updatePageItem(pageIndex: number, sectionIndex: number, itemIndex: number, item: QTWaterfallItem): void
该方法更新指定索引标签页的指定索引板块的指定索引的条目。

deletePageItem

完整方法声明：function deletePageItem(pageIndex: number, sectionIndex: number, itemIndex: number, count: number): void
该方法删除指定索引标签页的指定索引板块的指定索引的条目。

addPageItemList

完整方法声明：function addPageItemList(pageIndex: number, sectionIndex: number, itemList: Array<QTWaterfallItem>): void
该方法向指定索引标签页的指定索引板块添加条目列表。

reloadAll

完整方法声明：function reloadAll(updateCurrent: boolean): void
该方法重新加载所有的标签页。

reloadPage

完整方法声明：function reloadPage(pageIndex: number): void
该方法重新加载标签页数据。

setCurrentPage

完整方法声明：function setCurrentPage(pageIndex: number): void
该方法显示指定索引的标签页。

destroy

完整方法声明：function destroy(): void
该方法销毁标签页。

基础用法

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '基础用法',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onESCreate() {
			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);

			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');
			let sectionList: Array<QTWaterfallSection> = [
				section,
			];
			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

单Tab

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			tabNavBarClass='qt-tabs-nav-bar-css'
			tabContentClass='qt-tabs-content-css'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-single-tab-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item.vue';

export default defineComponent({
	name: '单Tab',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onESCreate() {
			//tab item list
			const tabItemList: Array<QTTabItem> = [];
			let tabItem: QTTabItem = {
				_id: '1',
				type: 20000,
				text: 'Tab',
				titleSize: 20,
				decoration: {
					left: 40,
					right: 20,
				},
			};
			tabItemList.push(tabItem);
			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);

			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');
			let sectionList: Array<QTWaterfallSection> = [section];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-single-tab-css {
	width: 1920px;
	height: 1080px;
}

.es-sdk-root-css .qt-tabs-nav-bar-css {
	width: 1920px;
	height: 0;
	background-color: red;
}

.qt-tabs-content-css {
	width: 1920px;
	height: 1080px;
	background-color: #7415B1;
}
</style>

设置数据

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			:outOfDateTime='1000000'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab, QTTabPageState,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '设置数据',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();
		//tab item list
		const tabItemList: Array<QTTabItem> = [];

		function onESCreate() {

			for (let i = 0; i < 10; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,

			};
			tabRef.value?.initTab(tab);

			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			getPageData(pageIndex, pageNo, useDiff);
		}

		function getPageData(pageIndex: number, pageNo: number, useDiff: boolean) {
			setTimeout(() => {
				let sectionList: Array<QTWaterfallSection> = [];
				for (let i = 0; i < 1; i++) {
					let section: QTWaterfallSection = generatorAppWaterfallSection('' + i, 'Page:' + pageNo + '的应用');
					sectionList.push(section);
				}
				const tabPage: QTTabPageData = {
					useDiff: useDiff,
					data: sectionList,
				};
				if (pageNo == 0) {
					tabRef.value?.setPageData(pageIndex, tabPage);
				} else {
					tabRef.value?.addPageData(pageIndex, tabPage, 0);
				}
				if (pageNo == 8) {
					tabRef.value?.setPageState(pageIndex, QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE);
				}
			}, 1000);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

横向

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			:horizontal='false'
			tabClass='qt-tabs-horizontal-css'
			tabNavBarClass='qt-tabs-tab-css'
			tabPageClass='qt-tabs-page-css'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-horizontal-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '横向',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onESCreate() {
			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}
			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1670,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');
			let sectionList: Array<QTWaterfallSection> = [section];
			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-horizontal-css {
	width: 1920px;
	height: 1080px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.qt-tabs-tab-css {
	width: 250px;
	height: 800px;
}

.qt-tabs-page-css {
	width: 1670px;
	height: 1080px;
}
</style>

自定义TabItem

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:tab-item>
				<tab-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTWaterfallSectionType, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import tab_item from './item/tab-item';
import {buildWaterfallItemList} from './data/mock';

export default defineComponent({
	name: '自定义TabItem',
	components: {
		'tab-item': tab_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 1,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 3; i++) {
				let section: QTWaterfallSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					title: '板块',
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 50,
					},
					style: {
						width: 1920,
						height: -1,
					},
					itemList: buildWaterfallItemList('' + i),
				};
				sectionList.push(section);
			}

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 900px;
}
</style>

标签页板块

Vue 板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-vue-section>
				<vue-one-section />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab, QTWaterfallItemType, QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import vue_one_section from './section/vue-one-section';
import vue_two_section from './section/vue-two-section';

export default defineComponent({
	name: 'VueSection',
	components: {
		'vue-one-section': vue_one_section,
		'vue-two-section': vue_two_section,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			let section_1: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_VUE,
				itemList: [],
				style: {
					width: 1920,
					height: 320,
				},
				decoration: {
					top: 20,
					bottom: 20,
				},
			};
			let sectionList: Array<QTWaterfallSection> = [
				section_1,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

标签页板块操作

添加板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='添加Section' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab, QTTabPageState,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '添加Section',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '新添加应用'),
			];
			const tabPage: QTTabPageData = {
				useDiff: true,
				data: sectionList,
			};
			tabRef.value?.addPageData(0, tabPage, 0);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageNum = 0;

		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			if (pageIndex !== 0) {
				return;
			}
			setTimeout(() => {
				let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');

				let sectionList: Array<QTWaterfallSection> = [
					section,
				];

				const tabPage: QTTabPageData = {
					useDiff: useDiff,
					data: sectionList,
				};
				if (pageNum == 0) {
					tabRef.value?.setPageData(pageIndex, tabPage);
				} else {
					tabRef.value?.addPageData(pageIndex, tabPage, 0);
				}
				pageNum++;

				if (pageNum === 2) {
					tabRef.value?.setPageState(pageIndex, QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE);
				}
			}, 2000);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
			onButtonClicked,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

删除板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='删除第一个page第一个section' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '删除Section',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {
			tabRef.value?.deletePageSection(0, 0, 1);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section_1: QTWaterfallSection = generatorAppWaterfallSection('0', '应用:1');
			let section_2: QTWaterfallSection = generatorAppWaterfallSection('1', '应用:2');

			let sectionList: Array<QTWaterfallSection> = [
				section_1,
				section_2,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
			onButtonClicked,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

查询板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='查询Section' @onButtonClicked='onGetButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';
import {useESLog} from '@extscreen/es3-core';

const TAG = 'TabWaterfallTAG';

export default defineComponent({
	name: '查询Section',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();
		const log = useESLog();

		function onGetButtonClicked() {
			const sectionList = tabRef.value?.getPageSectionList(0);
			log.d(TAG, '-------获取sectionList-------->>>>', sectionList);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');

			let sectionList: Array<QTWaterfallSection> = [
				section,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
			onGetButtonClicked,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

更新板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='更新Section' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {
	generatorAppQuestionWaterfallItemList,
	generatorAppWaterfallSection,
	generatorWaterfallSection,
} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '更新Section',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {

			const itemList = generatorAppQuestionWaterfallItemList('0', 5);
			let section: QTWaterfallSection = generatorWaterfallSection('0', '应用更新', itemList);
			tabRef.value?.updatePageSection(0, 0, section);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section_1: QTWaterfallSection = generatorAppWaterfallSection('0', '应用：1');
			let section_2: QTWaterfallSection = generatorAppWaterfallSection('1', '应用：2');

			let sectionList: Array<QTWaterfallSection> = [
				section_1, section_2,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
			onButtonClicked,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

标签页条目

自定义条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<waterfall-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTWaterfallSectionType, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import waterfall_item from './item/waterfall-item';
import {buildCustomWaterfallItemList} from './data/mock';

export default defineComponent({
	name: '自定义Item',
	components: {
		'waterfall-item': waterfall_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 4; i++) {
				let section: QTWaterfallSection = {
					_id: i + '',
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					title: '板块',
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 50,
					},
					style: {
						width: 1920,
						height: -1,
					},
					itemList: buildCustomWaterfallItemList(i + ''),
				};
				sectionList.push(section);
			}

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 900px;
}
</style>

标签页条目操作

添加条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='添加Item' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppQuestionWaterfallItemList, generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '添加Item',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {
			const itemList = generatorAppQuestionWaterfallItemList('0', 2);
			tabRef.value?.addPageItemList(0, 0, itemList);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');

			let sectionList: Array<QTWaterfallSection> = [
				section,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
			onButtonClicked,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

删除条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='删除Item' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '删除Item',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {
			tabRef.value?.deletePageItem(0, 0, 0, 1);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');

			let sectionList: Array<QTWaterfallSection> = [
				section,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onTabPageLoadData,
			onButtonClicked,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

查询条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='查询Item' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '查询Item',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {
			const item = tabRef.value?.getPageItem(0, 0, 1);
			console.log('---------查询Item---------->>>' + '  item:', item);
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');

			let sectionList: Array<QTWaterfallSection> = [
				section,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onButtonClicked,
			onESCreate,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

更新条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='更新Item' @onButtonClicked='onButtonClicked' />
		</div>
		<qt-tabs
			ref='tabRef'
			@onTabPageLoadData='onTabPageLoadData'
			class='qt-tabs-css'>
			<template v-slot:waterfall-item>
				<app-list-item :type='1' />
			</template>
		</qt-tabs>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTITab, QTTabPageData, QTWaterfall, QTWaterfallSection, QTTabItem, QTTab,
} from '@quicktvui/quicktvui3';
import {generatorAppWaterfallSection} from '../__mocks__/app';
import app_list_item from './item/app-list-item';

export default defineComponent({
	name: '更新Item',
	components: {
		'app-list-item': app_list_item,
	},
	setup(props, context) {
		const tabRef = ref<QTITab>();

		function onButtonClicked() {
			const item = tabRef.value?.getPageItem(0, 0, 2);
			if (item) {
				item.appName = '小恐龙';
				item.appIcon = 'http://qcloudimg.a311.ottcn.com/data_center/files/2022/11/07/854f47b2-fdbe-4543-a2c3-1f8754dcb13e.jpg';
				tabRef.value?.updatePageItem(0, 0, 2, item);
			}
		}

		function onESCreate() {

			//tab item list
			const tabItemList: Array<QTTabItem> = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTTabItem = {
					_id: '' + i,
					type: 20000,
					text: 'Tab:' + i,
					titleSize: 20,
					decoration: {
						left: 40,
						right: 20,
					},
				};
				tabItemList.push(tabItem);
			}

			//tab
			const tab: QTTab = {
				defaultFocusIndex: 0,
				defaultIndex: 0,
				itemList: tabItemList,
			};
			tabRef.value?.initTab(tab);


			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			tabRef.value?.initPage(waterfallData);
		}

		let pageIndexLast = -1;

		//-----------------------------------------------------
		function onTabPageLoadData(pageIndex: number, pageNo: number, useDiff: boolean): void {
			console.log('---------loadPageData---------->>>' +
				'  pageIndex:' + pageIndex +
				'  useDiff:' + useDiff,
			);
			if (pageIndexLast === pageIndex) {
				return;
			}
			pageIndexLast = pageIndex;

			let section: QTWaterfallSection = generatorAppWaterfallSection('0', '应用');

			let sectionList: Array<QTWaterfallSection> = [
				section,
			];

			const tabPage: QTTabPageData = {
				useDiff: useDiff,
				data: sectionList,
			};
			tabRef.value?.setPageData(pageIndex, tabPage);
		}

		return {
			tabRef,
			onESCreate,
			onButtonClicked,
			onTabPageLoadData,
		};
	},
});

</script>

<style>
.qt-tabs-css {
	width: 1920px;
	height: 1080px;
}
</style>

标签页 Tabs ​

标签页基本数据结构 ​

标签页接口 ​

基础用法 ​

单Tab ​

设置数据 ​

横向 ​

自定义TabItem ​

标签页板块 ​

Vue 板块 ​

标签页板块操作 ​

添加板块 ​

删除板块 ​

查询板块 ​

更新板块 ​

标签页条目 ​

自定义条目 ​

标签页条目操作 ​

添加条目 ​

删除条目 ​

查询条目 ​

更新条目 ​

标签页 Tabs

标签页基本数据结构

标签页接口

基础用法

单Tab

设置数据

横向

自定义TabItem

标签页板块

Vue 板块

标签页板块操作

添加板块

删除板块

查询板块

更新板块

标签页条目

自定义条目

标签页条目操作

添加条目

删除条目

查询条目

更新条目