Appearance
tv-list
属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
:initPosition | Map | 无 | 否 | focusPosition:请求焦点的位置,可以不传,不传不会请求焦点;scrollToPosition:首次滚动的位置,可以不传;scrollOffset:首次滚动的偏移量,可以不传。示例如下。 |
:list | Array | 无 | 否 | 设置列表数据 |
:listenBoundEvent | Boolean | false | 否 | 是否开启view绑定监听回调 |
:disableScrollOnFirstScreen | Boolean | false | 否 | 是否开启列表在展示第一屏数据时切换焦点不滑动 |
:checkScrollOffsetOnStateChanged | Boolean | false | 否 | 是否开启tv-list滑动事件onScrollStateChanged监听回调 |
:scrollEventThrottle | Int | 400 | 否 | tv-list滑动事件onScrolled监听回调间隔时间,配合onScrollEnable属性使用,单位:毫秒 |
:onScrollEnable | Boolean | false | 否 | 是否开启tv-list滑动事件onScrolled监听回调 |
:scrollYLesserReferenceValue | Int | -1 | 否 | tv-list向上滑动偏移量,配合onScrollEnable属性使用 |
:scrollYGreaterReferenceValue | Int | -1 | 否 | tv-list向下滑动偏移量,配合onScrollEnable属性使用 |
:layoutTargetPosition | Int | -1 | 否 | 指定某个item更新外部定义方法,详情请见TriggerTaskModule |
:makeChildVisibleType | String | "center" | 否 | 指定某个子视图显示在屏幕中位置的类型,共分为:center:居中显示;normal:默认显示; none:只显示viewgroup矩形区域 |
:makeChildVisibleClampBackward | Int | 0 | 否 | 焦点向下,列表上滑到屏幕中最后一个元素时的向上滑动偏移量(只有在:makeChildVisibleType 属性不为center时有效) |
:makeChildVisibleClampForward | Int | 0 | 否 | 焦点向上,列表下滑到屏幕中最后一个元素时的向下滑动偏移量(只有在:makeChildVisibleType 属性不为center时有效) |
:scrollThresholdHorizontal | Int | 300 | 否 | 列表水平滑动时触发item显示在屏幕正中间位置的阀值(超过阀值则触发,只有在:makeChildVisibleType 属性为center时有效) |
:scrollThresholdVertical | Int | 50 | 否 | 列表垂直滑动时触发item显示在屏幕正中间位置的阀值(超过阀值则触发,只有在:makeChildVisibleType 属性为center时有效) |
:cachePool | Map | 无 | 否 | 设置adapter的缓存池;示例cachePool:{ name:"tvList"+Date.now(), size:{ 10000:10, } }, |
:cachePoolName | String | 无 | 否 | 设置当前使用缓存池名称 |
:focusMemory | Boolean | true | 否 | 是否开启焦点强制移动(寻焦速度更快) |
:setSelectChildPosition | Int | 0 | 否 | 设置选中的子view,此属性只在view已经显示出来才有效 |
:shakePreCheckNumber | Int | 2 | 否 | 设置列表滑动到底部触发回弹动画时的提前量(横向滑动时是滑动到最右) |
:endHintEnabled | Boolean | true | 否 | 是否开启列表回弹动画 |
:listenFocusSearchOnFail | Boolean | true | 否 | 是否开启当焦点寻焦失败时的事件回调 |
:enableSelectOnFocus | Boolean | true | 否 | 是否开启指定获取焦点 |
:useAdvancedFocusSearch | Boolean | true | 否 | 是否关闭recyclerView的默认焦点搜索 |
:enableKeepFocus | Boolean | false | 否 | 是否开启焦点预处理 |
:initFocusPositionAfterLayout | Int | -1 | 否 | 设置焦点初始默认位置 |
:blockFocusDirections | Array | 无 | 否 | 在某个方向锁住焦点 |
:spanCount | Int | 无 | 否 | spanCount数大于1时可以开启tv-list的Grid模式详Grid效果浏览 |
initPosition
参数:
参数名 | 类型 | 说明 |
---|---|---|
focusPosition | Int | 焦点默认位置 |
scrollToPosition | Int | 默认滑动位置 |
scrollOffset | Int | 滑动偏移量 |
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数据;
参数名 | 类型 | 说明 |
---|---|---|
data | Array | 列表数据集合 |
setListDataWithParams(data, autoChangeVisible)
设置tv-list数据,并自动显示;
参数名 | 类型 | 说明 |
---|---|---|
data | Array | 列表数据集合 |
autoChangeVisible | Boolean | 是否自动显示 |
updateItem(pos,data)
更新列表指定位置数据;
参数名 | 类型 | 说明 |
---|---|---|
pos | Int | 要更新的位置 |
data | Array | 要更新的数据集合 |
scrollToTop()
列表滑动到顶部
setDisplay(display)
设置列表是否显示
参数名 | 类型 | 说明 |
---|---|---|
display | Boolean | 是否显示 |
scrollToPosition(index)
滑动到指定位置
参数名 | 类型 | 说明 |
---|---|---|
index | Int | 要滑到的位置 |
scrollToIndex(y, anim, offsetndex)
滑动到指定位置并附带动画和偏移量
参数名 | 类型 | 说明 |
---|---|---|
y | Int | 要滑到的位置 |
anim | Boolean | 是否开启动画 |
offsetndex | Int | 偏移量 |
requestChildFocus(pos)
指定子Item获取焦点
参数名 | 类型 | 说明 |
---|---|---|
pos | Int | 子Item位置 |
setSelectChildPosition(pos,b)
设置选中的子view,注意此方法只在view已经显示出来以后调用才有效
参数名 | 类型 | 说明 |
---|---|---|
pos | Int | 要选中的子View位置 |
b | Boolean | 设置要选中的子View的焦点 |
pausePostTask()
暂停所有列表加载事务Task
resumePostTask()
恢复所有列表加载事务Task
clearPostTask()
清空所有列表加载事务Task
destroy()
清空数据和缓存
事件
@item-click
Item点击事件回调
参数名 | 类型 | 说明 |
---|---|---|
position | Int | 点击Item的位置(在子布局里) |
parentPosition | Int | 点击Item的在父布局中的位置 |
name | String | 点击Item的name类型 |
item | Object | 当前点击item绑定的数据 |
@item-focused
Item焦点事件回调
参数名 | 类型 | 说明 |
---|---|---|
position | Int | 焦点所在Item的位置(在子布局里) |
parentPosition | Int | 焦点所在Item的在父布局中的位置 |
hasFocus | Boolean | 焦点所在Item是否获得焦点 |
name | String | 点击Item的name类型 |
item | Object | 当前点击item绑定的数据 |
@item-bind
Item绑定事件回调
参数名 | 类型 | 说明 |
---|---|---|
position | Int | 绑定Item的位置 |
name | String | 绑定Item的name |
@item-unbind
Item解除绑定事件回调
参数名 | 类型 | 说明 |
---|---|---|
position | Int | 解除绑定Item的位置 |
name | String | 解除绑定Item的name |
@scroll
列表滑动onScroll事件回调
参数名 | 类型 | 说明 |
---|---|---|
contentOffset | Map | 滑动参数 |
contentOffset参数:
参数名 | 类型 | 说明 |
---|---|---|
x | Float | 列表滑动x轴偏移量 |
y | Float | 列表滑动y轴偏移量 |
@scroll-state-changed
列表滑动onScrollStateChanged事件回调
参数名 | 类型 | 说明 |
---|---|---|
contentOffset | Map | 滑动参数 |
state | Map | 滑动状态 |
contentOffset参数:
参数名 | 类型 | 说明 |
---|---|---|
x | Float | 列表滑动x轴偏移量 |
y | Float | 列表滑动y轴偏移量 |
state参数:
参数名 | 类型 | 说明 |
---|---|---|
oldState | Int | 之前列表滑动状态 |
newState | Int | 当前列表滑动状态 |
@focus-search-failed
列表寻焦失败事件回调
参数名 | 类型 | 说明 |
---|---|---|
child | Map | 当前焦点所在item |
focused | Map | 焦点将要落在item |
direction | Int | 滑动方向 |
child参数:
参数名 | 类型 | 说明 |
---|---|---|
index | Int | 当前item的位置 |
id | Int | 当前item的id |
name | String | 当前item的name |
focused参数:
参数名 | 类型 | 说明 |
---|---|---|
id | Int | 焦点将要落在item的id |
name | String | 焦点将要落在item的name |
注意事项
在
mounted()
中使用setListData()
方法时最好加上100ms的延迟,避免view还没加载完成就加载数据导致的加载数据失败;<tv-list>
配合使用<tv-item>
,提供更多功能;horizontal
、advancedFocusSearchSpan
、padding
属性不可动态改变,这三个在tv-list初始化时就确定;要实现
onItemClick
和onItemFocus
回调,需要在item中加上属性eventClick
和eventFocus
,这样才能让item响应点击和焦点事件;:scrollThresholdHorizontal
和:scrollThresholdVertical
属性的生效条件是:makeChildVisibleType='center'
;