QuickTVUI

Appearance

嵌套 ​

1. 嵌套模板 ​

点击查看源码
html

<template>
    <qt-list-view class="list_view" ref="list_view">
        <qt-list-item type="1" ref="${name}" name="${name}">
            <qt-list-view class="list_view_inner" list="${list}" type="1" horizontal>
                <qt-poster :type="11"/>
            </qt-list-view>
        </qt-list-item>
        <qt-poster :type="2"/>
    </qt-list-view>
</template>

2. 组件初始化 ​

  1. 数据准备（data数据同tv-list）
点击查看源码
javascript

  let imgSrc = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
  let data = [
      {
        type: 1,
        list:[
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题01', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题02', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题03', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题04', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题05', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题06', 260, 320, 11)
        ]
      },
      {
        type: 1,
        list:[
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题11', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题12', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题13', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题14', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题15', 260, 320, 11),
          PosterBuilder.buildBottomTitleItem(imgSrc, '横向标题16', 260, 320, 11)
        ]
      },
      PosterBuilder.buildBottomTitleItem(imgSrc, '纵向标题1', 260, 320, 2),
      PosterBuilder.buildBottomTitleItem(imgSrc, '纵向标题2', 260, 320, 2),
      PosterBuilder.buildBottomTitleItem(imgSrc, '纵向标题3', 260, 320, 2)
]
  1. 初始化init
点击查看源码
javascript
 let returnVal = this.$refs.grid_view.init(data)
 //注意 returnVal将是整个组件控制视图变化的唯一数据