ul

[范例：demo-list.vue]

[范例：横向list]

ES 的重点功能，高性能的可复用列表组件。里面第一层只能包含 <li>。

属性

参数	描述	类型
horizontal	开启横向列表模式，默认为false。	boolean
numberOfRows	指定列表的行数，一般直接传入数据源条数 length 即可。	number
initialContentOffset	初始位移值 -- 在列表初始化时即可指定滚动距离，避免初始化后再通过 scrollTo 系列方法产生的闪动。	number
scrollEventThrottle	指定滑动事件的回调频率，传入数值指定了多少毫秒(ms)组件会调用一次 onScroll 回调事件，默认 200ms	number
showScrollIndicator	是否显示垂直滚动条。 因为目前 ListView 其实仅有垂直滚动一种方向，水平滚动会导致 onEndReached 等一堆问题暂不建议使用，所以 showScrollIndicator 也仅用来控制是否显示垂直滚动条。	boolean
preloadItemNumber	预加载：指定当列表滚动至倒数第几个时触发 onLoadMore 回调。	number
disableAdvancedFocusSearch	关闭ul寻焦性能优化，在某些不正常情况下，可尝试关闭，默认开启	boolean
endHintEnabled	设置是否开启底部回弹反馈效果	boolean
focusMemory	设置是否记忆列表上次选中焦点的问题	boolean
initFocusPositionAfterLayout	设置在ul布局完成后，首次获得焦点的子View	number
listenFocusSearchOnFail	设置是否监听在ul内部寻焦失败事件	number
makeChildVisibleType	设置子View获得焦点时，如果展示不完整，如何滚动ul的方式，分别为normal和center	string
makeChildVisibleClampBackward	设置子View获得焦点时，如果展示不完整，向前滚动ul时设置的偏移量	number
makeChildVisibleClampForward	设置子View获得焦点时，如果展示不完整，向后滚动ul时设置的偏移量	number
enableSelectOnFocus	设置子View的select状态是否跟随焦点的变化而变化	number
scrollStateChangeEnabled	scrollStateChanged 事件开关，默认true	boolean
clipChildren	设置是否将超出边界的子View切除	boolean
descendantFocusability	设置焦点的分发方式,0为在后代元素前，1为在后代元素后，2为阻止分发	int
*blockFocusDirections	当div内部寻焦为空时，是否拦截焦点	Array
nextFocusName	按下媒体键下一个焦点的目标	Map(left:'',right:'',up:'',down:'')
disableAdvancedFocusSearch	关闭默认的焦点搜索方式。默认ul优先在列表内部寻焦以提高效率	boolean
listenBoundEvent	是否开启on-bind,un-bind事件监听	boolean
setUseNegativeLayout	是否打开消极的layout方式，兼容性api，防止某些场景列表频繁刷新。	boolean
*initPosition	列表初始化时一些滚动位置、初始化焦点等设置	map
scrollThresholdHorizontal	焦点在列表内部横向焦点变化时，小于此值的滚动会被忽略	number
scrollThresholdVertical	焦点在列表内部纵向焦点变化时，小于此值的滚动会被忽略	number
shakePreCheckNumber	底部回弹效果触发时距最后一个item的个数	number

• blockFocusDirections中需传递一个Array，分别用up、down、left、right代表上下左右的方向：例如

点击查看源码

<div :blockFocusDirections="blockDirections"></div>

点击查看源码

blockDirections: ['left', 'right', 'up', 'down']

• initPosition 参数:

点击查看源码

//示例：滚动至位置1，并且让第2个child获得焦点
initPosition={
    focusPosition:2, //焦点位置
    scrollToPosition:1, //滚动位置
    scrollOffset:0,//偏移量
    delay:50,//执行delay时间(毫秒）
    force:true//是否强制刷新
}

事件

事件名称	描述	类型
endReached	当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 onEndReached 回调。	Function
momentumScrollBegin	在 ScrollView 开始滑动的时候调起	Function
momentumScrollEnd	在 ScrollView 结束滑动的时候调起	Function
scrollStateChanged	当触发 ListView 的滑动状态时回调，Event.newState:1(开始滑动)、Event.newState:2(滑动中)、Event.newState:0(滑动结束)、Event.offsetX(x轴坐标)、Event.offsetY(x轴坐标)	Function
scroll	当触发 ListView 的滑动事件时回调，在 ListView 滑动时回调，因此调用会非常频繁，请使用 scrollEventThrottle 进行频率控制。 注意：ListView 在滚动时会进行组件回收，不要在滚动时对 renderRow() 生成的 ListItemView 做任何 ref 节点级的操作（例如：所有 callUIFunction 和 measureInWindow 方法），回收后的节点将无法再进行操作而报错。Event.offsetX(x轴坐标)、Event.offsetY(x轴坐标)	Function
loadMore	当需要分页加载数据时，将触发 onLoadMore 回调，会触发此函数，可配合参数（preloadItemNumber）使用	Function
childFocus	同div相同	Function
item-bind	ul中一个item创建时回调	Function (通过参数position获得item位置）
item-unbind	ul中一个item回收利用时回调	Function(通过参数position获得item位置）

方法

scrollTo

(xOffset: number, yOffset: number: duration: number) => void 通知 ListView 滑动到某个具体坐标偏移值(offset)的位置。

• xOffset: number - 滑动到 X 方向的 offset
• yOffset: numbere - 滑动到 Y 方向的 offset
• duration: number - 多长事件滚到指定位置

scrollToIndex

(xIndex: number, yIndex: number: animated: boolean) => void 通知 ListView 滑动到第几个 item。

• xIndex: number - 滑动到 X 方向的第 xIndex 个 item
• yIndex: numbere - 滑动到 Y 方向的 xIndex 个 item
• animated: boolean - 滑动过程是否使用动画

setInitPosition

(info : map) => void 通知 ListView 滚动并请求焦点。 示例：

点击查看源码

let toFocus = {
    focusPosition: 4, //请求焦点的position
    scrollToPosition: 3,//滚动的目标position
    scrollOffset:0, //滚动的偏移量
    force:true,   //强制刷新列表
}
//滚动至第三个item的位置并且让第四个item请求焦点
Vue.Native.callUIFunction(this.$refs.ul, 'setInitPosition',[toFocus])

requestChildFocus

(position: number) => void 通知 ListView 第几个子 item获得焦点。

• position: 子item在列表中的index值

setTargetFocusChildPosition

(position: number) => void ListView 在没有焦点时，第几个item会优先获得焦点。

• position: 子item在列表中的index值

scrollToTop

scrollToTop() => void 通知 ListView 滚动回初始位置。

setSelectChildPosition

(position: number) => void 通知 ListView 第几个子 item获得select状态。

setTargetFocusChildPosition

(position: number) => void ListView 在初次获得焦点时，被首先寻焦的位置。

refreshListData

ListView 手动刷新列表

getScrollOffset

getScrollOffset(promise:function) 获取当前View滚动位置

this.$refs.current.getScrollOffset().then((pos)=>{
    //pos.x 
    //pos.y
 })