标签页 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
该方法销毁标签页。
基础用法
点击查看源码
<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
点击查看源码
<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>
设置数据
点击查看源码
<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>
横向
点击查看源码
<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
点击查看源码
<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 板块
点击查看源码
<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>
标签页板块操作
添加板块
点击查看源码
<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>
删除板块
点击查看源码
<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>
查询板块
点击查看源码
<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>
更新板块
点击查看源码
<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>
标签页条目
自定义条目
点击查看源码
<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>
标签页条目操作
添加条目
点击查看源码
<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>
删除条目
点击查看源码
<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>
查询条目
点击查看源码
<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>
更新条目
点击查看源码
<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>