瀑布流 Waterfall
Section列表组成Waterfall。
item列表组成Section。
瀑布流结构图
![](/component/waterfall/waterfall_structure.jpg)
瀑布流基本数据结构
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使用示例:
点击查看源码
<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>
事件
点击查看源码
<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
即可
点击查看源码
<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
即可
点击查看源码
<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
即可
点击查看源码
<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
即可
点击查看源码
<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
点击查看源码
<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
点击查看源码
<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>
点击查看源码
<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
点击查看源码
<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
点击查看源码
<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>
瀑布流板块操作
添加板块
点击查看源码
<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>
查询板块
点击查看源码
<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>
删除板块
点击查看源码
<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>
更新板块
点击查看源码
<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>
自定义板块
点击查看源码
<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>
板块装饰信息
点击查看源码
<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>
板块背景
点击查看源码
<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
点击查看源码
<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
点击查看源码
<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>
瀑布流条目操作
添加条目
点击查看源码
<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>
查询条目
点击查看源码
<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>
删除条目
点击查看源码
<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>
更新条目
点击查看源码
<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>
条目装饰信息
点击查看源码
<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>
自定义条目
点击查看源码
<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>