瀑布流 Waterfall

Section列表组成Waterfall。
item列表组成Section。

瀑布流结构图

瀑布流基本数据结构

QTWaterfall

用来描述瀑布流信息

参数	描述	类型	必填
width	瀑布流的宽度	`number`	是
height	瀑布流的高度	`number`	是
visibleType	瀑布流显示的类型	`QTWaterfallVisibleType`	否

QTWaterfallItem

用来描述瀑布流Item信息

参数	描述	类型	必填
_id	瀑布流item的id	`string`	否
type	瀑布流item的类型	`number`	是
decoration	瀑布流item的装饰尺寸	`QTListViewItemDecoration`	否
style	瀑布流item视图的样式	`QTWaterfallFlexStyle`	是

QTWaterfallSection
用来描述瀑布流Section信息

参数	描述	类型	必填
_id	瀑布流section的id	`string`	否
type	瀑布流section的类型	`number`	是
decoration	瀑布流section的装饰尺寸	`QTListViewItemDecoration`	否
style	瀑布流section视图的样式	`QTWaterfallFlexStyle`	是
title	瀑布流section的标题	`string`	否
titleStyle	瀑布流section的标题样式	`QTWaterfallFlexStyle & QTFlexStyleText`	否
itemList	瀑布流section中的item列表	`Array<QTWaterfallItem>`	是
placeholder	瀑布流section中的占位	`QTWaterfallPlaceholder`	否

瀑布流接口

QTIWaterfall用来描述瀑布流的接口

init

完整方法声明：function init(waterfall: QTWaterfall)
该方法根据初始化瀑布流。

getSectionList

完整方法声明：function getSectionList(): Array<QTWaterfallSection>
该方法获取瀑布流包含的板块列表数据。

setSectionList

完整方法声明：function setSectionList(sections: Array<QTWaterfallSection>): void
该方法设置瀑布流板块列表数据。

addSectionList

完整方法声明：function addSectionList(sections: Array<QTWaterfallSection>): void
该方法给瀑布流添加板块。

deleteSection

完整方法声明：function deleteSection(sectionIndex: number, count: number): void
该方法删除指定的板块。

updateSection

完整方法声明：function updateSection(sectionIndex: number, section: QTWaterfallSection): void
该方法更新指定index的瀑布流板块。

updateSectionList

完整方法声明：function updateSectionList(sectionIndex: number, count: number, sectionList: Array<QTWaterfallSection>): void
该方法更新瀑布流板块列表。

getSection

完整方法声明：function getSection(sectionIndex: number): QTWaterfallSection | undefined
该方法获取指定索引的瀑布流板块。

addItemList

完整方法声明：function addItemList(sectionIndex: number, itemList: Array<QTWaterfallItem>): void
该方法向指定索引的板块中添加条目。

deleteItem

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

updateItem

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

updateItemList

完整方法声明：function updateItemList(sectionIndex: number, itemIndex: number, count: number, itemList: Array<QTWaterfallItem>): void
该方法更新指定索引板块中的条目列表。

getItem

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

scrollToTop

完整方法声明：function scrollToTop(): void
该方法使瀑布流滚动到顶部。

destroy

完整方法声明：function destroy(): void
该方法销毁瀑布流。

基础用法

基于QTPoster使用示例：

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall, QTPoster,
	QTWaterfall, QTWaterfallItem,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '基础用法',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			//1.初始化瀑布流
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//2.构造section数据
			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 2; i++) {
				let section: QTWaterfallSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					title: '板块:' + i,
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 80,
					},
					//3.构造section中item列表数据
					itemList: buildPosterItemList(i + ''),
					style: {
						width: 1920,
						height: -1,
					},
				};
				sectionList.push(section);
			}

			//4.给瀑布流设置板块列表数据
			waterfall.value?.setSectionList(sectionList);
		}

		function buildPosterItemList(sectionId: string): Array<QTWaterfallItem> {
			let data: Array<QTWaterfallItem> = [];
			let imgURL = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750';
			for (let i = 0; i < 15; i++) {
				const poster: QTPoster = {
					_id: sectionId + '_' + i,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					type: 10001,
					decoration: {
						left: 90,
						bottom: 90,
					},
					title: {
						text: '主标题',
						enable: true,
						style: {
							width: 260,
						},
					},
					subTitle: {
						text: '副标题',
						enable: true,
						style: {
							width: 260,
						},
					},
					floatTitle: {
						text: '浮动标题',
						enable: true,
						style: {
							width: 260,
						},
						background: {colors: ['#e5000000', '#00000000'], orientation: 4},
					},
					shimmer: {
						enable: true,
					},
					ripple: {
						enable: true,
						style: {
							right: 0,
							bottom: 0,
							marginRight: -12,
						},
					},
					image: {
						src: imgURL,
						enable: true,
						style: {
							width: 260,
							height: 320,
						},
					},
					corner: {
						text: '角标',
						enable: true,
						style: {
							width: 260,
							height: 30,
						},
						background: {
							colors: ['#FE3824', '#F0051E'],
							cornerRadii4: [0, 8, 0, 8],
							orientation: 2,
						},
					},
					style: {
						width: 260,
						height: 400,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			return data;
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

事件

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			@onScroll='onScroll'
			@onItemClick='onItemClick'
			@onItemFocused='onItemFocused'
			@onItemBind='onItemBind'
			@onScrollStateChanged='onScrollStateChanged'
			@onItemAttached='onItemAttached'
			class='qt-waterfall-css'>
			<template v-slot:item>
				<text-item :type='1' />
			</template>
		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall, QTScrollState,
	QTWaterfall, QTWaterfallItem,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import text_item from './item/text-item.vue';
import {useESLog} from '@extscreen/es3-core';

const TAG = 'QTWaterfallEvent';

export default defineComponent({
	name: '事件',
	components: {
		'text-item': text_item,
	},
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();
		const log = useESLog();

		function onScroll(offsetX: number, scrollY: number) {
			log.d(TAG, ' offsetX:' + offsetX +
				' scrollY:' + scrollY,
			);
		}

		function onItemClick(sectionIndex: number, position: number, item: QTWaterfallItem) {
			log.d(TAG, ' sectionIndex:' + sectionIndex +
				' position:' + position +
				' item:', item,
			);
		}

		function onItemFocused(sectionIndex: number, position: number, isFocused: boolean, item: QTWaterfallItem) {
			log.d(TAG, ' sectionIndex:' + sectionIndex +
				' position:' + position +
				' isFocused:' + isFocused +
				' item:', item,
			);
		}

		function onItemBind(position: number) {
			log.d(TAG, ' position:' + position,
			);
		}

		function onItemAttached(position: number) {
			log.d(TAG, ' position:' + position,
			);
		}

		function onScrollStateChanged(offsetX: number, scrollY: number, newState: QTScrollState) {
			log.d(TAG, ' offsetX:' + offsetX +
				' scrollY:' + scrollY +
				' newState:' + newState,
			);
		}

		function onESCreate(params) {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//
			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 2; i++) {
				let itemList: Array<QTWaterfallItem> = [];
				for (let k = 0; k < 2; k++) {
					const item: QTWaterfallItem = {
						_id: i + '_' + k,
						type: 1,
						style: {
							width: 500,
							height: 200,
						},
					};
					itemList.push(item);
				}

				let section: QTWaterfallSection = {
					_id: i + '',
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					title: '板块',
					itemList: itemList,

					style: {
						width: 1920,
						height: 200,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onScroll,
			onItemClick,
			onItemFocused,
			onItemBind,
			onItemAttached,
			onScrollStateChanged,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

瀑布流板块

瀑布流板块类型

瀑布流内置如下类型板块：

加载板块：QT_WATERFALL_SECTION_TYPE_LOADING
标题板块：QT_WATERFALL_SECTION_TYPE_TITLE
弹性布局板块：QT_WATERFALL_SECTION_TYPE_FLEX
横向列表板块：QT_WATERFALL_SECTION_TYPE_LIST
标签板块：QT_WATERFALL_SECTION_TYPE_TAB
标签列表板块：QT_WATERFALL_SECTION_TYPE_TAB_LIST
卡片板块：QT_WATERFALL_SECTION_TYPE_CARD
原生Vue板块：QT_WATERFALL_SECTION_TYPE_VUE
结束板块：QT_WATERFALL_SECTION_TYPE_END
空板块：QT_WATERFALL_SECTION_TYPE_BLANK

List Section

使用内置列表板块，设置section类型为QT_WATERFALL_SECTION_TYPE_LIST即可

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {buildPosterItemList} from '../__mocks__/poster';
import {
	QTIWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: 'ListSection',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			waterfall.value?.init({
				width: 1920,
				height: 1080,
			});

			let section: QTWaterfallSection = {
				itemList: buildPosterItemList('1'),
				style: {
					width: 1920,
					height: 500,
					spacing: 20,
				},
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
			};
			waterfall.value?.setSectionList([section]);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

End Section

使用内置底部板块，设置section类型为QT_WATERFALL_SECTION_TYPE_END即可

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildLinePosterItemList} from '../__mocks__/poster';

export default defineComponent({
	name: 'EndSection',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//1.创建一个结束板块
			let sectionList: Array<QTWaterfallSection> = [];
			let endSection: QTWaterfallSection = {
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_END,
				title: '已经到底啦，按【返回键】回到顶部',
				titleStyle: {
					width: 1920,
					height: 200,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				itemList: [],
				style: {
					width: 1920,
					height: 200,
				},
			};
			sectionList.push(endSection);

			//2.创建一个结束板块
			let section: QTWaterfallSection = {
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
				title: '底部板块',
				titleStyle: {
					width: 1920,
					height: 60,
					marginTop: 30,
					marginBottom: 30,
					marginLeft: 30,
				},
				itemList: buildLinePosterItemList(),
				style: {
					width: 1920,
					height: -1,
				},
			};
			sectionList.push(section);
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

Blank Section

使用内置空板块，设置section类型为QT_WATERFALL_SECTION_TYPE_BLANK即可

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: 'BlankSection',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			let sectionList: Array<QTWaterfallSection> = [];
			let sectionBlank: QTWaterfallSection = {
				_id: '2',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_BLANK,
				itemList: [],
				style: {
					width: 1920,
					height: 200,
				},
			};
			sectionList.push(sectionBlank);
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

Tabs Section

使用内置标签板块，设置section类型为QT_WATERFALL_ITEM_TYPE_TAB即可

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			@onItemClick='onItemClick'
			@onItemFocused='onItemFocused'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallItem,
	QTWaterfallItemType,
	QTWaterfallSection,
	QTWaterfallSectionType,
	QTWaterfallTabItem,
} from '@quicktvui/quicktvui3';
import {ESLogLevel, useESLog} from '@extscreen/es3-core';

const TAG = 'TabSectionPage';

export default defineComponent({
	name: 'TabSection',
	setup(props, context) {
		const log = useESLog();
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			const tabItemList = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTWaterfallTabItem = {
					_id: '' + i,
					style: {
						width: 200,
						height: 50,
						paddingLeft: 40,
						paddingRight: 40,
					},
					type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
					text: 'Tab:' + i,
				};
				tabItemList.push(tabItem);
			}

			let tabSection: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
				title: 'Tab板块',
				titleStyle: {
					width: 1920,
					height: 60,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				style: {
					width: 1920,
					height: -1,
				},
				itemList: tabItemList,
			};

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

			waterfall.value?.setSectionList(sectionList);
		}

		//-----------------------------------------------------
		function onItemClick(sectionIndex: number, position: number, item: QTWaterfallItem) {
			if (log.isLoggable(ESLogLevel.DEBUG)) {
				log.d(TAG, item,
					'sectionIndex:' + sectionIndex + '  ' +
					'position:' + position + '  ' +
					'item:', item,
				);
			}
			if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
				if (log.isLoggable(ESLogLevel.DEBUG)) {
					log.d(TAG, '  sectionIndex:' + sectionIndex +
						'  position:' + position +
						'  item:', item,
					);
				}
			}
		}

		function onItemFocused(sectionIndex: number, position: number, isFocused: boolean, item: QTWaterfallItem) {
			if (log.isLoggable(ESLogLevel.DEBUG)) {
				log.d(TAG, item,
					'sectionIndex:' + sectionIndex + '  ' +
					'position:' + position + '  ' +
					'isFocused:' + isFocused + '  ',
				);
			}

			if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
				if (isFocused) {
					//do sth
				}
			}
		}

		return {
			waterfall,
			onESCreate,
			onItemFocused,
			onItemClick,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

Tabs List Section

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			@onItemFocused='onItemFocused'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallItem,
	QTWaterfallItemType,
	QTWaterfallSection,
	QTWaterfallSectionType,
	QTWaterfallTabItem,
} from '@quicktvui/quicktvui3';
import {ESLogLevel, useESLog} from '@extscreen/es3-core';
import {buildPosterItemList, buildPosterTitleItemList} from '../__mocks__/poster';

const TAG = 'TabListSectionPage';

export default defineComponent({
	name: 'TabListSection',
	setup(props, context) {
		const log = useESLog();
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			const tabItemList = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTWaterfallTabItem = {
					_id: '1_' + i,
					style: {
						width: 100,
						height: 50,
					},
					decoration: {
						left: 90,
					},
					type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
					text: 'Tab:' + i,
				};
				tabItemList.push(tabItem);
			}

			let tabSection: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
				title: 'Tab板块',
				titleStyle: {
					width: 1920,
					height: 60,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				style: {
					width: 1920,
					height: -1,
				},
				itemList: tabItemList,
			};
			let listSection: QTWaterfallSection = {
				_id: '2',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
				titleStyle: {
					width: 0,
					height: 0,
					fontSize: 50,
				},
				style: {
					width: 1920,
					height: 400,
				},
				itemList: buildPosterItemList('2'),
			};

			let sectionList: Array<QTWaterfallSection> = [
				tabSection,
				listSection,
			];
			waterfall.value?.setSectionList(sectionList);
		}

		//-----------------------------------------------------
		function onItemFocused(sectionIndex: number, position: number, isFocused: boolean, item: QTWaterfallItem) {
			if (log.isLoggable(ESLogLevel.DEBUG)) {
				log.d(TAG, item,
					'sectionIndex:' + sectionIndex + '  ' +
					'position:' + position + '  ' +
					'isFocused:' + isFocused + '  ',
				);
			}

			if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
				if (isFocused) {
					const section = waterfall.value?.getSection(1);
					if (section) {
						section.itemList = buildPosterTitleItemList('Tab:' + position);
						waterfall.value?.updateSection(1, section);
					}
				}
			}
		}

		return {
			waterfall,
			onESCreate,
			onItemFocused,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

Vue Section

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			@onItemFocused='onItemFocused'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallItem,
	QTWaterfallItemType,
	QTWaterfallSection,
	QTWaterfallSectionType,
	QTWaterfallTabItem,
} from '@quicktvui/quicktvui3';
import {ESLogLevel, useESLog} from '@extscreen/es3-core';
import {buildPosterItemList, buildPosterTitleItemList} from '../__mocks__/poster';

const TAG = 'TabListSectionPage';

export default defineComponent({
	name: 'TabListSection',
	setup(props, context) {
		const log = useESLog();
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			const tabItemList = [];

			for (let i = 0; i < 15; i++) {
				let tabItem: QTWaterfallTabItem = {
					_id: '1_' + i,
					style: {
						width: 100,
						height: 50,
					},
					decoration: {
						left: 90,
					},
					type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
					text: 'Tab:' + i,
				};
				tabItemList.push(tabItem);
			}

			let tabSection: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
				title: 'Tab板块',
				titleStyle: {
					width: 1920,
					height: 60,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				style: {
					width: 1920,
					height: -1,
				},
				itemList: tabItemList,
			};
			let listSection: QTWaterfallSection = {
				_id: '2',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
				titleStyle: {
					width: 0,
					height: 0,
					fontSize: 50,
				},
				style: {
					width: 1920,
					height: 400,
				},
				itemList: buildPosterItemList('2'),
			};

			let sectionList: Array<QTWaterfallSection> = [
				tabSection,
				listSection,
			];
			waterfall.value?.setSectionList(sectionList);
		}

		//-----------------------------------------------------
		function onItemFocused(sectionIndex: number, position: number, isFocused: boolean, item: QTWaterfallItem) {
			if (log.isLoggable(ESLogLevel.DEBUG)) {
				log.d(TAG, item,
					'sectionIndex:' + sectionIndex + '  ' +
					'position:' + position + '  ' +
					'isFocused:' + isFocused + '  ',
				);
			}

			if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
				if (isFocused) {
					const section = waterfall.value?.getSection(1);
					if (section) {
						section.itemList = buildPosterTitleItemList('Tab:' + position);
						waterfall.value?.updateSection(1, section);
					}
				}
			}
		}

		return {
			waterfall,
			onESCreate,
			onItemFocused,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

点击查看源码

TypeScript

vue

<template>
	<div class='time-section-css'>
		<span class='time-section-text-css'>18</span>
		<span v-show='show' class='time-section-text-css'>:</span>
		<span class='time-section-text-css'>24</span>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';

export default defineComponent({
	name: 'time-section',
	setup(props, context) {
		const show = ref<boolean>(true);

		setInterval(() => {
			show.value = !show.value;
		}, 1000);

		return {
			show,
		};
	},
});
</script>

<style scoped>
.time-section-css {
	width: 1920px;
	height: 200px;
	background-color: red;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.time-section-text-css {
	color: white;
	font-size: 40px;
	width: 50px;
	height: 50px;
	text-align: center;
	text-align-vertical: center;
}
</style>

Card Section

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSectionType,
	QTWaterfallCardSection,
} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: 'CardSection',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//
			let sectionList: Array<QTWaterfallCardSection> = [];
			for (let i = 0; i < 2; i++) {
				let section: QTWaterfallCardSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_CARD,
					title: 'Card板块',
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 50,
					},
					itemList: [],
					cardId: '1717748409857474561',
					cardStyle: {
						width: 1920,
						height: 400,
					},
					style: {
						width: 1920,
						height: 540,
					},
					decoration: {
						top: 40,
						bottom: 40,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

Card Section Placeholder

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSectionType,
	QTWaterfallCardSection,
} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: 'CardSectionPlaceholder',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//
			let sectionList: Array<QTWaterfallCardSection> = [];
			for (let i = 0; i < 2; i++) {
				let section: QTWaterfallCardSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_CARD,
					title: 'Card板块',
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 50,
					},
					itemList: [],
					cardId: '1717748409857474561',
					cardPlaceHolder: {
						enable: true,//是否可用
						radius: 100,//圆角
						rect: [100, 0, 100, 0],
						focusable: true,
						focusScale: 1.2,
					},
					cardStyle: {
						width: 1920,
						height: 400,
					},
					style: {
						width: 1920,
						height: 540,
					},
					decoration: {
						top: 40,
						bottom: 40,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

瀑布流板块操作

添加板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildPosterDecorationItemList} from '../__mocks__/poster';

export default defineComponent({
	name: 'SectionDecoration',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//
			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 2; i++) {
				let section: QTWaterfallSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					itemList: buildPosterDecorationItemList(),
					title: 'Section',
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 50,
					},
					style: {
						width: 1920,
						height: -1,
					},
					//
					decoration: {
						top: 10,
						bottom: 300,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

.qt-waterfall-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='查询板块' @onButtonClicked='onGetButtonClicked' />
		</div>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-op-css'>
			<template v-slot:item>
				<app-list-item :type='1' />
			</template>
		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

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

const TAG = 'WaterfallTAG';

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

		function onGetButtonClicked() {
			const section = waterfall.value?.getSection(0);
			log.d(TAG, 'section:', section);
		}

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '应用：' + new Date().getTime()),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onGetButtonClicked,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

删除板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='添加板块' @onButtonClicked='onAddButtonClicked' />
			<s-text-button text='删除板块' @onButtonClicked='onDeleteButtonClicked' />
		</div>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-op-css'>
			<template v-slot:item>
				<app-list-item :type='1' />
			</template>
		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

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

const TAG = 'WaterfallTAG';

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

		function onAddButtonClicked() {
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '应用：' + new Date().getTime()),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		function onDeleteButtonClicked() {
			waterfall.value?.deleteSection(0, 1);
		}

		//-------------------------------------------------------------
		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			//
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '应用：' + new Date().getTime()),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onAddButtonClicked,
			onDeleteButtonClicked,
		};
	},
});

</script>

<style>
.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

更新板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='更新单个板块' @onButtonClicked='onUpdateButtonClicked' />
			<s-text-button text='更新高度变化板块' @onButtonClicked='onUpdateHeightButtonClicked' />
			<s-text-button text='更新多个板块' @onButtonClicked='onUpdateMultiButtonClicked' />
		</div>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-op-css'>
			<template v-slot:item>
				<app-list-item :type='1' />
			</template>
		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

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

const TAG = 'WaterfallTAG';

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

		function onUpdateButtonClicked() {
			const section = waterfall.value?.getSection(0);
			if (section) {
				section.title = '新：' + section.title;
				section.itemList = generatorAppChildrenWaterfallItemList(0 + '', 5);
				waterfall.value?.updateSection(0, section);
			}
		}

		function onUpdateHeightButtonClicked() {
			const section = waterfall.value?.getSection(0);
			if (section) {
				section.title = '新：' + section.title;
				section.itemList = generatorAppChildrenWaterfallItemList(0 + '', 9);
				waterfall.value?.updateSection(0, section);
			}
		}

		function onUpdateMultiButtonClicked() {
			const sectionList: Array<QTWaterfallSection> = [];
			const section_0 = waterfall.value?.getSection(0);
			if (section_0) {
				section_0.title = '新：' + section_0.title;
				section_0.itemList = generatorAppChildrenWaterfallItemList(0 + '', 5);
				sectionList.push(section_0);
			}
			const section_1 = waterfall.value?.getSection(1);
			if (section_1) {
				section_1.title = '新：' + section_1.title;
				section_1.itemList = generatorAppQuestionWaterfallItemList(1 + '', 6);
				sectionList.push(section_1);
			}
			if (sectionList) {
				waterfall.value?.updateSectionList(0, 2, sectionList);
			}
		}

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			//
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '应用：' + new Date().getTime()),
				generatorAppWaterfallSection('1', '应用：' + new Date().getTime()),
				generatorAppWaterfallSection('2', '应用：' + new Date().getTime()),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onUpdateButtonClicked,
			onUpdateMultiButtonClicked,
			onUpdateHeightButtonClicked,
		};
	},
});

</script>

<style>
.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

自定义板块

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css'>

			<template v-slot:section>
				<text-section :type='1' />
			</template>

		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
} from '@quicktvui/quicktvui3';

import text_section from './section/text-section';

export default defineComponent({
	name: '自定义ection',
	components: {
		'text-section': text_section,
	},
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate(params) {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			let section: QTWaterfallSection = {
				_id: '1',
				type: 1,
				itemList: [],
				style: {
					width: 1920,
					height: 320,
				},
			};
			let sectionList: Array<QTWaterfallSection> = [
				section,
			];
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

板块装饰信息

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildPosterDecorationItemList} from '../__mocks__/poster';

export default defineComponent({
	name: 'SectionDecoration',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//
			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 2; i++) {
				let section: QTWaterfallSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					itemList: buildPosterDecorationItemList(),
					title: 'Section',
					titleStyle: {
						width: 1920,
						height: 60,
						marginLeft: 90,
						marginTop: 40,
						marginBottom: 40,
						fontSize: 50,
					},
					style: {
						width: 1920,
						height: -1,
					},
					//
					decoration: {
						top: 10,
						bottom: 300,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

<style>
.es-sdk-root-css {
	width: 1920px;
	height: 1080px;
	background-color: #26292F;
}

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

板块背景

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildLinePosterItemList} from '../__mocks__/poster';
import {ESGradientShape, ESGradientType} from '@extscreen/es3-component';

export default defineComponent({
	name: 'SectionBackground',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let sectionList: Array<QTWaterfallSection> = [];
			let endSection: QTWaterfallSection = {
				_id: '100',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_END,
				title: '已经到底啦，按【返回键】回到顶部',
				titleStyle: {
					width: 1920,
					height: 200,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				itemList: [],
				style: {
					width: 1920,
					height: 200,
					gradientBackground: {
						type: ESGradientType.ES_GRADIENT_TYPE_LINEAR_GRADIENT,
						shape: ESGradientShape.ES_GRADIENT_SHAPE_RECTANGLE,
						colors: ['#40b883', '#4068b8'],
						cornerRadii4: [0, 5, 20, 0],
					},
				},
			};
			sectionList.push(endSection);

			for (let i = 0; i < 1; i++) {
				let section: QTWaterfallSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					title: '板块',
					titleStyle: {
						width: 1920,
						height: 60,
						marginTop: 30,
						marginBottom: 30,
						marginLeft: 30,
						fontSize: 50,
					},
					itemList: buildLinePosterItemList(),
					style: {
						width: 1920,
						height: -1,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

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

瀑布流条目

瀑布流条目类型

瀑布流内置如下类型条目：

海报条目：QT_WATERFALL_ITEM_TYPE_POSTER
标签条目：QT_WATERFALL_ITEM_TYPE_TAB
卡片条目：QT_WATERFALL_ITEM_TYPE_CARD
空条目：QT_WATERFALL_ITEM_TYPE_BLANK

Card Item

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildCardItemList} from '../__mocks__/card';

export default defineComponent({
	name: 'CardItem',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			let sectionList: Array<QTWaterfallSection> = [];
			let section: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
				title: 'CardItem板块:',
				titleStyle: {
					width: 1920,
					height: 60,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				itemList: buildCardItemList(),
				style: {
					width: 1920,
					height: -1,
				},
			};
			sectionList.push(section);
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

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

Card Item Placeholder

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildCardItemPlaceHolderList} from '../__mocks__/card';

export default defineComponent({
	name: 'CardItemPlaceHolder',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);

			//
			let sectionList: Array<QTWaterfallSection> = [];
			let section: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
				title: 'CardItem板块:',
				titleStyle: {
					width: 1920,
					height: 60,
					marginLeft: 90,
					marginTop: 40,
					marginBottom: 40,
					fontSize: 50,
				},
				itemList: buildCardItemPlaceHolderList(),
				style: {
					width: 1920,
					height: -1,
				},
			};
			sectionList.push(section);
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

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

瀑布流条目操作

添加条目

点击查看源码

TypeScript

vue

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

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
} from '@quicktvui/quicktvui3';
import {useESLog} from '@extscreen/es3-core';
import app_list_item from './item/app-list-item';
import {
	generatorAppChildrenWaterfallItemList,
	generatorAppQuestionWaterfallItemList,
	generatorAppWaterfallItemList,
	generatorWaterfallSection,
} from '../__mocks__/app';

const TAG = 'WaterfallTAG';

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

		//
		function onAddButtonClicked() {
			const itemList = generatorAppWaterfallItemList('0', 1);
			waterfall.value?.addItemList(0, itemList);
		}

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			//
			let sectionList: Array<QTWaterfallSection> = [
				generatorWaterfallSection('0', '应用：' + new Date().getTime(),
					generatorAppQuestionWaterfallItemList('1', 5)),
				generatorWaterfallSection('2', '应用：' + new Date().getTime(),
					generatorAppChildrenWaterfallItemList('3', 5)),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onAddButtonClicked,
		};
	},
});

</script>

<style>
.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

查询条目

点击查看源码

TypeScript

vue

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

<script lang='ts'>

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

const TAG = 'WaterfallTAG';

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

		function onGetButtonClicked() {
			const item = waterfall.value?.getItem(0, 2);
			log.d(TAG, '-------获取item信息-------->>>>', item);
		}

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '应用：' + new Date().getTime()),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onGetButtonClicked,
		};
	},
});

</script>

<style>
.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

删除条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='删除第一个板块Item' @onButtonClicked='onDeleteButtonClicked' />
			<s-text-button text='删除第二个板块Item' @onButtonClicked='onDeleteButton2Clicked' />
		</div>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-op-css'>
			<template v-slot:item>
				<app-list-item :type='1' />
			</template>
		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
} from '@quicktvui/quicktvui3';
import {useESLog} from '@extscreen/es3-core';
import app_list_item from './item/app-list-item';
import {
	generatorAppChildrenWaterfallItemList,
	generatorAppQuestionWaterfallItemList,
	generatorWaterfallSection,
} from '../__mocks__/app';

const TAG = 'WaterfallTAG';

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

		function onDeleteButtonClicked() {
			waterfall.value?.deleteItem(0, 0, 1);
		}

		function onDeleteButton2Clicked() {
			waterfall.value?.deleteItem(1, 0, 2);
		}

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let sectionList: Array<QTWaterfallSection> = [
				generatorWaterfallSection('0', '应用：' + new Date().getTime(),
					generatorAppQuestionWaterfallItemList('1', 7)),
				generatorWaterfallSection('2', '应用：' + new Date().getTime(),
					generatorAppChildrenWaterfallItemList('3', 7)),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onDeleteButton2Clicked,
			onDeleteButtonClicked,
		};
	},
});

</script>

<style>
.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

更新条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<s-text-button text='更新单个Item' @onButtonClicked='onUpdateButtonClicked' />
			<s-text-button text='更新多个Item' @onButtonClicked='onUpdateMultiButtonClicked' />
		</div>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-op-css'>
			<template v-slot:item>
				<app-list-item :type='1' />
			</template>
		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

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

const TAG = 'WaterfallTAG';

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

		function onUpdateButtonClicked() {
			let item = generatorAppChildrenWaterfallItem('0', 2);
			waterfall.value?.updateItem(0, 0, item);
		}

		function onUpdateMultiButtonClicked() {
			const itemList = generatorAppChildrenWaterfallItemList('0', 2);
			waterfall.value?.updateItemList(0, 0, 2, itemList);
		}

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let sectionList: Array<QTWaterfallSection> = [
				generatorAppWaterfallSection('0', '应用：' + new Date().getTime()),
				generatorAppWaterfallSection('1', '应用：' + new Date().getTime()),
				generatorAppWaterfallSection('2', '应用：' + new Date().getTime()),
			];
			waterfall.value?.addSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
			onUpdateButtonClicked,
			onUpdateMultiButtonClicked,
		};
	},
});

</script>

<style>
.qt-waterfall-op-css {
	width: 1920px;
	height: 800px;
}
</style>

条目装饰信息

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import {buildPosterDecorationItemList} from '../__mocks__/poster';

export default defineComponent({
	name: 'ItemDecoration',
	setup(props, context) {
		const waterfall = ref<QTIWaterfall>();

		function onESCreate() {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let sectionList: Array<QTWaterfallSection> = [];
			for (let i = 0; i < 1; i++) {
				let section: QTWaterfallSection = {
					_id: '' + i,
					type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
					itemList: buildPosterDecorationItemList(),
					titleStyle: {
						width: 0,
						height: 0,
						fontSize: 50,
					},
					style: {
						width: 1920,
						height: 400 + 60 + 36,
					},
				};
				sectionList.push(section);
			}
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

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

自定义条目

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<qt-waterfall
			ref='waterfall'
			class='qt-waterfall-css'>

			<template v-slot:item>
				<text-item :type='1' />
			</template>

		</qt-waterfall>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {
	QTIWaterfall,
	QTWaterfall, QTWaterfallItem,
	QTWaterfallSection,
	QTWaterfallSectionType,
} from '@quicktvui/quicktvui3';
import text_item from './item/text-item.vue';

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

		function onESCreate(params) {
			let waterfallData: QTWaterfall = {
				width: 1920,
				height: 1080,
			};
			waterfall.value?.init(waterfallData);
			let itemList: Array<QTWaterfallItem> = [];
			for (let i = 0; i < 2; i++) {
				const item: QTWaterfallItem = {
					_id: i + '',
					type: 1,
					style: {
						width: 500,
						height: 200,
					},
				};
				itemList.push(item);
			}
			let section: QTWaterfallSection = {
				_id: '1',
				type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
				title: '板块',
				itemList: itemList,
				style: {
					width: 1920,
					height: 200,
					spacing: 20,
				},
			};
			let sectionList: Array<QTWaterfallSection> = [
				section,
				section,
				section,
			];
			waterfall.value?.setSectionList(sectionList);
		}

		return {
			waterfall,
			onESCreate,
		};
	},
});

</script>

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

瀑布流 Waterfall ​

瀑布流结构图 ​

瀑布流基本数据结构 ​

瀑布流接口 ​

基础用法 ​

事件 ​

瀑布流板块 ​

瀑布流板块类型 ​

List Section ​

End Section ​

Blank Section ​

Tabs Section ​

Tabs List Section ​

Vue Section ​

Card Section ​

Card Section Placeholder ​

瀑布流板块操作 ​

添加板块 ​

查询板块 ​

删除板块 ​

更新板块 ​

自定义板块 ​

板块装饰信息 ​

板块背景 ​

瀑布流条目 ​

瀑布流条目类型 ​

Card Item ​

Card Item Placeholder ​

瀑布流条目操作 ​

添加条目 ​

查询条目 ​

删除条目 ​

更新条目 ​

条目装饰信息 ​

自定义条目 ​

瀑布流 Waterfall

瀑布流结构图

瀑布流基本数据结构

瀑布流接口

基础用法

事件

瀑布流板块

瀑布流板块类型

List Section

End Section

Blank Section

Tabs Section

Tabs List Section

Vue Section

Card Section

Card Section Placeholder

瀑布流板块操作

添加板块

查询板块

删除板块

更新板块

自定义板块

板块装饰信息

板块背景

瀑布流条目

瀑布流条目类型

Card Item

Card Item Placeholder

瀑布流条目操作

添加条目

查询条目

删除条目

更新条目

条目装饰信息

自定义条目