海报 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 | 否 |
基础用法
点击查看源码
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>
间距
点击查看源码
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>
主标题
点击查看源码
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>
次标题
点击查看源码
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>
浮动标题
点击查看源码
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>
角标
点击查看源码
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>
评分
点击查看源码
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>
阴影
点击查看源码
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>
高光
点击查看源码
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>
水波
点击查看源码
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>