快应用

Appearance

TVList ​

tv-list是更适合于TV应用而开发的多功能的列表组件,其功能于ul类似，提供了丰富的api和其他扩展能力，实现前端对复杂情况下列表的构建能力。
它在牺牲一定代码开发便利的同时提供了更贴近Native应用的性能及体验。
相较于ul，tv-list更适合在列表数据过多、UI页面复杂且性能要求较高的场景下使用。

效果预览 ​

ESTVListComponent

Grid模式效果预览 ​

注意：grid布局目前仅只在sdk为2.2及上版本支持

ESTVListComponent

集成 ​

  • package.json 引入库

    点击查看源码
    javascript
    "@extscreen/es-tv-list-component": "^1.0.2"

  • main-native.js 注册组件

    点击查看源码
    javascript
    import {
    ESTVListComponent,
} from "@extscreen/es-tv-list-component";

Vue.use(ESTVListComponent)

使用 ​

由于实现原理不同,vue中的指令(例如v-if,v-for等)在tv-list中不可用（除非item被指定为singleton，下面会讲到）。 一般使用步骤如下：

  1. 首先类似ul，编写模版以指定不同Type的item；
点击查看源码
html
<tv-list
        ref="listRef"
>
  <item1 :type="1" />
  <item2 :type="2"/>
</tv-list>
  1. 为tv-list组装数据dataList；
点击查看源码
javascript
//1
let dataList = [
  {
    type:1,
    text:'item1',
  },
  {
    type:2,
    item:{
      cover:'http://xx.jpg',
      text:'item2'
    },
  },
]

this.$refs.listRef.setListData(dataList)
  1. 从dataList中的对应字段中获取数据以对节点元素进行赋值；
点击查看源码
html
//item1:
<div>
  <text-view text="${text}"></text-view>
</div>
//item2:
<div>
  <img src="${item.cover}"></img>
  <text-view text="${item.text}"></text-view>
</div>

布局 ​

可以通过指定class,style的方式设置布局，支持flex;并且可以通过 属性flexStyle在列表展示动态获取dataList中的数据来设置布局； 例如：

点击查看源码
html
<div 
      style="z-index: 10;height: 50px;"
      flexStyle="${styleFromData}"
      />

在dataList中有对应的数据即可：

点击查看源码
javascript
let listData=[
  {
    type:1,
    styleFromData:{marginTop:5,width: 200,paddingLeft:10,left:10,top:20}
  },
]
//flexStyle中的参数对应flex布局中的参数

另外提供了一些便利属性方便布局：

点击查看源码
html
<div>
  layout=${layout}
  size=${size}
  translation:${translation}
</div>
//设置位置及大小
layout:{x,y,width,height}
//设置大小
size:{width,height}
//设置位置
translation:{x,y}

singleton ​

item中某些元素可能需要独立存在，并且一直保留其状态，可使用singleton标记； 被标记的节点会被当成一个特殊节点，支持Vue中的全部特性； 注意标记为singleton的item必须使用tv-item包裹；

点击查看源码
vue
<template>
  <tv-item  :type="1" singleton>
    <div v-if="isCreated">
        <ul>
          <li v-for="(_item,_index) in list" :key="_index" @click="onClick">
            <span class="flip_item_text">{{ _item.text }}</span>
          </li>
        </ul>
    </div>
  </tv-item>
</template>

<script>
export default {
  data() {
    return {
      //list发生变化，列表也会发生变化
      list: [],
      isCreated:true,
    }
  },
  methods:{
    //同样支持事件回调
    onClick(e) {
      console.log('onClick ')
    }
  }
    
}
</script>

调用item中的方法 ​

可在item中通过name指定元素，调用其对应的方法。 例如在item在onBind事件回调后，更新文本：

点击查看源码
html
// 通过tv-item包裹item
<tv-item ref="item" @item-bind="onItemBind">
    <text-view name="text"></text-view>
</tv-item>
// 通过dispatchItemFunction，调用方法
onItemBind(e){
  //position代表当前item在列表中的位置
  this.$refs.item.dispatchItemFunction(e.position,'text','setText',['Item onBind'])
}

delayLoad ​

为了提高性能，item中的某些元素可以考虑使用delayLoad标识来延迟元素加载，以提高列表滚动时的帧率；

点击查看源码
html
<div >
  <div name="div1">
    <img/>
  </div>
  <div name="div2" delayLoad="500">
    <heavy-items></heavy-items>
  </div>
</div>

上述代码中，div1会直接加载并展示出来,而div2则会在500毫秒之后才去创建；

所有API详见TVList组件API