QuickTVUI

Appearance

简介 ​

介绍：qt-poster是根据TV端常见格子ui样式并且配合qt-list-view、qt-grid-view、qt-waterfall、qt-tabs-waterfall组件生成的ui组件，并且直接处理了图片加载延迟、焦点、尺寸等常见的适配，降低开发成本。

注意，仅可以配合qt-list-view、qt-grid-view、qt-waterfall、qt-tabs-waterfall组件使用，单独不生效。

效果预览 ​

qt-poster

一、使用 ​

1. 无标题 ​

点击查看源码
html

<template>
    <!-- qt-poster组件 配合qt-list-view使用 -->
    <qt-list-view class="list_view" ref="list_view" :clipChildren="false" :clipPadding="false" horizontal>
        <qt-poster/>
    </qt-list-view>
</template>
点击查看源码
javascript
    let data = []
    for (let i = 0; i < 6; i++) {
        let imgURL = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
        //buildBasicItem(图片地址,width,height)
        let item = PosterBuilder.buildBasicItem(imgURL, 260, 320)
        item.decoration = {top: 20,bottom: 60,left:25} //设置poster边距
        data.push(item)
    }
    this.$refs.list_view.init(data) // qt-list-view组件初始化

2. 底部有标题 ​

点击查看源码
html

<template>
    <!-- qt-poster组件 配合qt-list-view使用 -->
    <qt-list-view class="list_view" ref="list_view" :clipChildren="false" :clipPadding="false" horizontal>
        <qt-poster/>
    </qt-list-view>
</template>
点击查看源码
javascript
    let data = []
    for (let i = 0; i < 6; i++) {
        let imgURL = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
        //buildBottomTitleItem(图片地址,title,width,height)
        let title = 'mainTitlelonglonglonglonglonglonglongTitle:' + i
        let item = PosterBuilder.buildBottomTitleItem(imgURL,title,260,320)
        item.decoration = {top: 20,bottom: 60,left:25} //设置poster边距
        data.push(item)
    }
    this.$refs.list_view.init(data) // qt-list-view组件初始化

3. 混合使用 ​

点击查看源码
html

<template>
    <!-- qt-poster组件 配合qt-list-view使用 -->
    <qt-list-view class="list_view" ref="list_view" :clipChildren="false" :clipPadding="false" horizontal>
        <qt-poster>
            <!-- slot 自定义poster 插槽节点 -->
            <div style="background-color: #FF5415;width: 100px;height:30px;position: absolute;z-index: 100;border-top-left-radius: 8px;">
                <span style="width: 100px;height: 30px" fontSize="20">slot</span>
            </div>
        </qt-poster>
    </qt-list-view>
</template>
点击查看源码
javascript
    let data = []
    for (let i = 0; i < 6; i++) {
        let imgURL = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
        let item = PosterBuilder.buildBottomTitleItem(imgURL,'MainTitle',260,320)
        if(i % 3 !== 0){
            PosterBuilder.setPosterFloatTitle(item,'float')
            PosterBuilder.setPosterCornerTitle(item,'浮动标题')
        }
        else if(i % 2 === 0){
            let title = 'mainTitlelonglonglonglonglonglonglongTitle:'+i
            PosterBuilder.setPosterMainTitle(item,title)
            PosterBuilder.setPosterCornerTitle(item,'底部标题')
        }else{
            PosterBuilder.setPosterCornerTitle(item,'无标题')
        }
        item.decoration = {top: 20,bottom: 60,left:25} //设置poster边距
        data.push(item)
    }
    this.$refs.list_view.init(data) // qt-list-view组件初始化

二、PosterBuilder API简介 ​

介绍：快速构建qt-poster所需数据而封装的组件。

生成底部无标题的item

点击查看源码
js
  //(图片地址, 宽, 高, 当前item类型) 返回值item 对象
  PosterBuilder.buildBasicItem(imgURL, width, height,type)

生成底部有标题的item

点击查看源码
js
  //(图片地址, 标题,  宽, 高, 当前item类型) 返回值item 对象
  PosterBuilder.buildBottomTitleItem(imgURL,title,width, height,type)

设置浮动标题

点击查看源码
js
 
  let item = PosterBuilder.buildBottomTitleItem(imgURL,title,width, height,type)

  //(item对象, 浮动标题的title)
  PosterBuilder.setPosterFloatTitle(item,'float')

设置右上角角标

点击查看源码
js
 
  let item = PosterBuilder.buildBottomTitleItem(imgURL,title,width, height,type)

  //(item对象, 右上角角标title)
  PosterBuilder.setPosterCornerTitle(item,'角标')