海报 Poster

海报基本数据结构

QTPoster

QTPoster继承自QTWaterfallItem

用来描述海报信息

参数	描述	类型	必填
focus	焦点	`QTFocusable`	否
image	图片	`QTPosterImage`	否
shadow	阴影	`QTPosterShadow`	否
shimmer	流光	`QTPosterShimmer`	否
title	标题	`QTPosterTitle`	否
focusTitle	焦点状态标题	`QTPosterTitle`	否
subTitle	副标题	`QTPosterTitle`	否
floatTitle	浮动标题	`QTPosterTitle`	否
ripple	水波纹	`QTPosterRipple`	否
corner	角标	`QTPosterCorner`	否
score	评分	`QTPosterScore`	否
titleStyle	标题样式	`QTFlexStyleMargin & QTFlexStylePadding & QTFlexStyleSize`	否
titleFocusStyle	焦点状态标题样式	`QTFlexStyleMargin & QTFlexStylePadding & QTFlexStyleSize`	否

基础用法

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list
				ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
				:clipChildren='false' :clipPadding='false'
				@item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '使用初探',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			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 < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					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: 30,
							height: 30,
						},
					},
					corner: {
						text: '角标',
						enable: true,
						style: {
							width: 260,
							height: 30,
						},
						background: {
							colors: ['#FE3824', '#F0051E'],
							cornerRadii4: [0, 8, 0, 8],
							orientation: 2,
						},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

间距

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '间距',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			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 < 2; i++) {

				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					style: {
						width: 260,
						height: 320,
					},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

主标题

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '主标题',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					title: {
						text: '主标题',
						enable: true,
						style: {
							width: 260,
						},
					},
					score: {
						text: '1.1',
						enable: true,
						style: {
							height: 100,
							width: 260,
							background: {colors: ['#e5000000', '#00000000'], orientation: 4},
						},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						marginTop: 0,
					},
					titleFocusStyle: {width: 260, marginTop: -10},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

次标题

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '次标题',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					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},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

浮动标题

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '浮动标题',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					title: {
						text: '主标题',
						enable: true,
						style: {
							width: 260,
						},
					},
					floatTitle: {
						text: '浮动标题',
						enable: true,
						style: {
							width: 260,
						},
						background: {colors: ['#e5000000', '#00000000'], orientation: 4},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

角标

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '角标',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					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},
					},
					corner: {
						text: '角标',
						enable: true,
						style: {
							width: 260,
							height: 30,
						},
						background: {
							colors: ['#FE3824', '#F0051E'],
							cornerRadii4: [0, 8, 0, 8],
							orientation: 2,
						},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

评分

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '评分',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					title: {
						text: '主标题',
						enable: true,
						style: {
							width: 260,
						},
					},
					score: {
						text: '1.1',
						enable: true,
						style: {
							width: 100,
							height: 100,
							left: 20,
							fontSize: 24,
							background: {colors: ['#e5000000', '#00000000'], orientation: 4},
						},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						marginTop: 0,
					},
					titleFocusStyle: {width: 260, marginTop: -10},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

阴影

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '阴影',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					shadow: {
						enable: true,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					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},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

高光

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '高光',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					shimmer: {
						enable: true,
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					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},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

水波

点击查看源码

TypeScript

vue

<template>
	<div class='es-sdk-root-css'>
		<div class='es-sdk-content-row-css'>
			<tv-list ref='listViewRef' class='qt_tv_list_view_root_css' horizontal='true'
							 :clipChildren='false' :clipPadding='false'
							 @item-click='onItemClick' @item-bind='onItemBind'>
				<qt-poster />
			</tv-list>
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';

export default defineComponent({
	name: '主标题',
	setup(props, context) {
		const listViewRef = ref<QTIListView>();

		const onESCreate = (params) => {
			let data: Array<QTListViewItem> = [];
			for (let i = 0; i < 2; i++) {
				const poster: QTPoster = {
					type: 10001,
					focus: {
						enable: true,
						scale: 1.1,
						border: false,
					},
					ripple: {
						enable: true,
						style: {
							right: 0,
							bottom: 0,
							marginRight: -12,
						},
					},
					decoration: {
						top: 20,
						left: 20,
						right: 20,
						bottom: 20,
					},
					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},
					},
					style: {
						width: 260,
						height: 320,
					},
					titleStyle: {
						width: 260,
						height: 120,
						marginTop: 320 - 60,
					},
					titleFocusStyle: {width: 260, marginTop: 320 - 100},
				};
				data.push(poster);
			}
			listViewRef.value?.setListData(data);
		};

		function onItemClick(el) {
		}

		function onItemBind(el) {
		}

		return {
			listViewRef,
			onESCreate,
			onItemClick,
			onItemBind,
		};
	},
});

</script>

<style>
.qt_tv_list_view_root_css {
	width: 1920px;
	height: 1080px;
}

</style>

海报 Poster ​

海报基本数据结构 ​

基础用法 ​

间距 ​

主标题 ​

次标题 ​

浮动标题 ​

角标 ​

评分 ​

阴影 ​

高光 ​

水波 ​

海报 Poster

海报基本数据结构

基础用法

间距

主标题

次标题

浮动标题

角标

评分

阴影

高光

水波