Skip to content

tv-list

属性

属性类型默认值必填说明
:initPositionMapfocusPosition:请求焦点的位置,可以不传,不传不会请求焦点;scrollToPosition:首次滚动的位置,可以不传;scrollOffset:首次滚动的偏移量,可以不传。示例如下。
:listArray设置列表数据
:listenBoundEventBooleanfalse是否开启view绑定监听回调
:disableScrollOnFirstScreenBooleanfalse是否开启列表在展示第一屏数据时切换焦点不滑动
:checkScrollOffsetOnStateChangedBooleanfalse是否开启tv-list滑动事件onScrollStateChanged监听回调
:scrollEventThrottleInt400tv-list滑动事件onScrolled监听回调间隔时间,配合onScrollEnable属性使用,单位:毫秒
:onScrollEnableBooleanfalse是否开启tv-list滑动事件onScrolled监听回调
:scrollYLesserReferenceValueInt-1tv-list向上滑动偏移量,配合onScrollEnable属性使用
:scrollYGreaterReferenceValueInt-1tv-list向下滑动偏移量,配合onScrollEnable属性使用
:layoutTargetPositionInt-1指定某个item更新外部定义方法,详情请见TriggerTaskModule
:makeChildVisibleTypeString"center"指定某个子视图显示在屏幕中位置的类型,共分为:center:居中显示;normal:默认显示; none:只显示viewgroup矩形区域
:makeChildVisibleClampBackwardInt0焦点向下,列表上滑到屏幕中最后一个元素时的向上滑动偏移量(只有在:makeChildVisibleType属性不为center时有效)
:makeChildVisibleClampForwardInt0焦点向上,列表下滑到屏幕中最后一个元素时的向下滑动偏移量(只有在:makeChildVisibleType属性不为center时有效)
:scrollThresholdHorizontalInt300列表水平滑动时触发item显示在屏幕正中间位置的阀值(超过阀值则触发,只有在:makeChildVisibleType属性为center时有效)
:scrollThresholdVerticalInt50列表垂直滑动时触发item显示在屏幕正中间位置的阀值(超过阀值则触发,只有在:makeChildVisibleType属性为center时有效)
:cachePoolMap设置adapter的缓存池;示例cachePool:{ name:"tvList"+Date.now(), size:{ 10000:10, } },
:cachePoolNameString设置当前使用缓存池名称
:focusMemoryBooleantrue是否开启焦点强制移动(寻焦速度更快)
:setSelectChildPositionInt0设置选中的子view,此属性只在view已经显示出来才有效
:shakePreCheckNumberInt2设置列表滑动到底部触发回弹动画时的提前量(横向滑动时是滑动到最右)
:endHintEnabledBooleantrue是否开启列表回弹动画
:listenFocusSearchOnFailBooleantrue是否开启当焦点寻焦失败时的事件回调
:enableSelectOnFocusBooleantrue是否开启指定获取焦点
:useAdvancedFocusSearchBooleantrue是否关闭recyclerView的默认焦点搜索
:enableKeepFocusBooleanfalse是否开启焦点预处理
:initFocusPositionAfterLayoutInt-1设置焦点初始默认位置
:blockFocusDirectionsArray在某个方向锁住焦点
:spanCountIntspanCount数大于1时可以开启tv-list的Grid模式详Grid效果浏览
  • initPosition参数:
参数名类型说明
focusPositionInt焦点默认位置
scrollToPositionInt默认滑动位置
scrollOffsetInt滑动偏移量
  • horizontal属性:切换列表为横向滑动(注意:不可动态改变此属性,竖向滑动时不需要配置此属性),类型:String
点击查看源码
html
  <tv-list class="tv_list_root"
           horizontal="true">
       <div class="item_root1"
            type="1">
                ...  
       </div>
  </tv-list>
  • advancedFocusSearchSpan属性:寻焦搜索范围,类型:Int
点击查看源码
html
  <tv-list class="tv_list_root"
           advancedFocusSearchSpan="1">
       <div class="item_root1"
            type="1">
                ...  
       </div>
  </tv-list>
  • padding属性:定义tv-list的内部间距(顺序:left,top,right,bottom) 类型:String
点击查看源码
html
  <tv-list class="tv_list_root"
           padding="60,0,0,0">
       <div class="item_root1"
            type="1">
                ...  
       </div>
  </tv-list>

方法

setListData(data)

设置tv-list数据;

参数名类型说明
dataArray列表数据集合

setListDataWithParams(data, autoChangeVisible)

设置tv-list数据,并自动显示

参数名类型说明
dataArray列表数据集合
autoChangeVisibleBoolean是否自动显示

updateItem(pos,data)

更新列表指定位置数据;

参数名类型说明
posInt要更新的位置
dataArray要更新的数据集合

scrollToTop()

列表滑动到顶部


setDisplay(display)

设置列表是否显示

参数名类型说明
displayBoolean是否显示

scrollToPosition(index)

滑动到指定位置

参数名类型说明
indexInt要滑到的位置

scrollToIndex(y, anim, offsetndex)

滑动到指定位置并附带动画和偏移量

参数名类型说明
yInt要滑到的位置
animBoolean是否开启动画
offsetndexInt偏移量

requestChildFocus(pos)

指定子Item获取焦点

参数名类型说明
posInt子Item位置

setSelectChildPosition(pos,b)

设置选中的子view,注意此方法只在view已经显示出来以后调用才有效

参数名类型说明
posInt要选中的子View位置
bBoolean设置要选中的子View的焦点

pausePostTask()

暂停所有列表加载事务Task


resumePostTask()

恢复所有列表加载事务Task


clearPostTask()

清空所有列表加载事务Task


destroy()

清空数据和缓存

事件

@item-click

Item点击事件回调

参数名类型说明
positionInt点击Item的位置(在子布局里)
parentPositionInt点击Item的在父布局中的位置
nameString点击Item的name类型
itemObject当前点击item绑定的数据

@item-focused

Item焦点事件回调

参数名类型说明
positionInt焦点所在Item的位置(在子布局里)
parentPositionInt焦点所在Item的在父布局中的位置
hasFocusBoolean焦点所在Item是否获得焦点
nameString点击Item的name类型
itemObject当前点击item绑定的数据

@item-bind

Item绑定事件回调

参数名类型说明
positionInt绑定Item的位置
nameString绑定Item的name

@item-unbind

Item解除绑定事件回调

参数名类型说明
positionInt解除绑定Item的位置
nameString解除绑定Item的name

@scroll

列表滑动onScroll事件回调

参数名类型说明
contentOffsetMap滑动参数

contentOffset参数:

参数名类型说明
xFloat列表滑动x轴偏移量
yFloat列表滑动y轴偏移量

@scroll-state-changed

列表滑动onScrollStateChanged事件回调

参数名类型说明
contentOffsetMap滑动参数
stateMap滑动状态

contentOffset参数:

参数名类型说明
xFloat列表滑动x轴偏移量
yFloat列表滑动y轴偏移量

state参数:

参数名类型说明
oldStateInt之前列表滑动状态
newStateInt当前列表滑动状态

@focus-search-failed

列表寻焦失败事件回调

参数名类型说明
childMap当前焦点所在item
focusedMap焦点将要落在item
directionInt滑动方向

child参数:

参数名类型说明
indexInt当前item的位置
idInt当前item的id
nameString当前item的name

focused参数:

参数名类型说明
idInt焦点将要落在item的id
nameString焦点将要落在item的name

注意事项

  1. mounted()中使用setListData()方法时最好加上100ms的延迟,避免view还没加载完成就加载数据导致的加载数据失败;

  2. <tv-list>配合使用<tv-item>,提供更多功能;

  3. horizontaladvancedFocusSearchSpanpadding属性不可动态改变,这三个在tv-list初始化时就确定;

  4. 要实现onItemClickonItemFocus回调,需要在item中加上属性eventClickeventFocus,这样才能让item响应点击和焦点事件;

  5. :scrollThresholdHorizontal:scrollThresholdVertical属性的生效条件是:makeChildVisibleType='center';