ListView

qt-list-view 是同 ul 一样注册的用于多功能的列表组件,增加数据代理,常用于单行多列的内容排版。支持横向纵向排列滚动,支持数据分页。

特点:初始化组件返回数据代理值,直接操作返回值更新ui视图,减少冗余api,降低开发成本。

注意:

  • 最低支持SDK版本2.1
  • 当前文档demo中默认item样式使用 qt-poster,在构建数据中可查看其使用方式。也可自定义item。
  • 自定义item样式中文本标签仅支持 text-view。

分页效果

注意:

  • listenBoundEvent 属性必须设置为true @item-bind 方法必须添加 可以不做任何处理 openPage 属性值为true
  • qt-list-view 嵌套时,分页仅支持最外层
  • loading type 必须设置为1002
  • stopPage() 分页结束后调用该方法停止分页
  • 分页结束后重新开启分页可v-if刷新组件

设置滑动方向

注意:

  • horizontal属性:切换列表为横向滑动(注意:不可动态改变此属性,纵向滑动时不需要配置此属性)
  • list-view中每个item样式的margin无效,需要数据中decorate的值来设置外边距

数据双向绑定用法

Q&A

  • horizontaladvancedFocusSearchSpanpadding属性不可动态改变,这三个在list-view初始化时就确定
  • 要实现onItemClickonItemFocus回调,需要在item中加上属性eventClickeventFocus,这样才能让item响应点击和焦点事件
  • :scrollThresholdHorizontal:scrollThresholdVertical属性的生效条件是:makeChildVisibleType='center'

API

Attributes

NameDescriptionTypeDefault
loadMore加载更多Function-
openPage是否分页加载数据booleanfalse
preloadNo预加载的页码数number0
defaultFocus默认焦点number-
loadingDecoration加载组件的装饰object{bottom:18,right:30,left:30}
focusable是否可以获得焦点booleanfalse
clipChildren裁剪子布局booleanfalse
clipPadding从padding区域向外裁剪booleanfalse
nextFocusDownSID 2.7向下时指定下一个焦点sidstring-
nextFocusUpSID 2.7向上时指定下一个焦点sidstring-
nextFocusLeftSID 2.7向左时指定下一个焦点sidstring-
nextFocusRightSID 2.7向右时指定下一个焦点sidstring-
nextFocusSID 2.7指定各方向下一个焦点sidobject-
sid 2.7给一个元素标记一个string id,可随意赋值,需确保唯一string-
fadingEdgeLength 2.5淡出效果长度number0
horizontalFadingEdgeEnabled 2.5开启横向淡出效果booleanfalse
verticalFadingEdgeEnabled 2.5开启纵向淡出效果booleanfalse
autofocus 2.7组件内根据状态(初始化、可见性改变、尺寸改变)变化自动获焦,focusable为true时自己获焦booleanfalse
renderToHardwareTextureAndroid设置layerTypeLAYER_TYPE_HARDWAREbooleanfalse
viewLayerType设置layerTypeenum-
clipBounds设置裁剪区域object-
descendantFocusability设置子孙组件的可聚焦性策略enum-
name指定元素的namestring-
nextFocusName指定各方向下一个焦点元素的nameobject-
visible是否可见booleanfalse
visibility可见性enumvisible
size设置元素大小array-
layout设置元素位置及大小array-
selectChildPosition设置选中子元素位置number-1
enableSelectOnFocus开启当焦点时自动设置选中子元素位置number-1
focusMemory开启子元素焦点记忆booleanfalse
useDiff开启时更新diff算法,提高性能,解决多次刷新问题 betabooleanfalse
initPosition列表初始化时一些滚动位置、初始化焦点等设置 deprecated 使用autofocus、autoscroll替代object-
listenBoundEvent开启监听item-focused等事件booleanfalse
enableItemAnimator开启item加载动画booleanfalse
disableScrollOnFirstScreen首屏时焦点切换不滚动 betabooleanfalse
skipFocusOnPausepause状态时不可获焦booleanfalse
taskPaused将组件活动(如创建item等,postDelay的组件)暂停booleanfalse
pauseTaskOnHide组件不可见时pausebooleanfalse
resetOnDetach开启时自动在离开屏幕时重置状态、滚动到头部booleanfalse
touchScrollEnabled开启触屏时滚动booleantrue
firstFocusChild 2.87指定从各方向获焦时,首个获焦对象,由childpositionsid指定object-
enableFirstFocusAtStart 2.87开启首个获焦对象为头部childbooleanfalse
enablePlaceholder 2.5加载时是否先展示placeholderbooleanfalse
checkScrollOffsetOnStateChanged是否在滚动事件时触发事件监听booleanfalse
onScrollEnable开启scroll事件监听booleantrue
makeChildVisibleType列表随焦点变化滚动方式enumcenter
makeChildVisibleClampBackward列表向后滚动时的留白betanumber0
makeChildVisibleClampForward列表前后滚动时的留白betanumber0
scrollThresholdHorizontal横向焦点触发滚动的阈值number0
scrollThresholdVertical横向焦点触发滚动的阈值number0
cachePoolitem缓存池,可以设置缓存池name,指定不同type类型item的数量,以优化性能object-
cachePoolNamecachePool简化版,只可指定缓存池name,不同实例,相同name使用同一缓存池string-
selectChildPosition选中子item位置number-1
shakePreCheckNumber到底抖动提示提前位置number2
placeholderFocusScale 2.7placeholder焦点放大倍数number1.1
placeholderColorString 2.7placeholder背景颜色(#RRGGBBAA)string#FFFFFF1A
placeholderColor 2.7placeholder背景颜色number(255,255,255,0.1)
placeholderBorderRadius 2.7placeholder圆角number8
endShakeEnabled到底反馈booleantrue
listenFocusSearchOnFail监听内部寻焦失败booleanfalse
enableStatesOnFocus子item获焦时自动改变自定义名称的状态arrayfalse
placeholderPostDelay 2.5placeholder变为真实内容的delay时间number100ms
enableKeepFocus保持焦点在内部booleanfalse
scrollFactor滚动速度参数number1
autofocusPosition 2.7自动焦点位置number-1
autoscroll 2.7自动滚动参数[position,offset]array-
autoSelectPosition 2.7自动选择位置betanumber-1
infiniteMode 2.87循环模式booleanfalse
infiniteParams 2.87循环模式参数object --
listData beta双向绑定数据集Array[]

Events

NameDescriptionType
item-click条目点击事件Function
scroll滚动事件Function
item-focused条目焦点事件Function
item-attached条目连接事件Function
item-detached条目断开连接事件Function
item-bind条目绑定事件Function
item-unbind条目取消绑定事件Function
load-more加载更多数据事件Function
scroll-state-changed滚动状态变化事件Function
focus-search-failed寻找焦点失败事件Function
scrollYGreaterReferenceY轴滚动增加事件Function
scrollYLesserReferenceY轴滚动减少事件Function

Slots

NameDescription
default自定义默认内容

Exposes

MethodDescriptionType
init初始化Function
stopPage停止分页Function
setItemFocused设置条目焦点Function
scrollToFocused滚动到焦点位置Function
setItemSelected选中条目Function
scrollToSelected滚动到选中位置Function
deleteItem删除条目Function
updateItemList更新条目列表Function
scrollToIndex滚动到指定位置Function
startScroll开始滚动Function
setSelectChildPosition选中指定位置的条目Function
scrollToPositionWithOffset滚动到指定的位置Function
scrollToPositionWithOffsetInfiniteMode滚动到指定的位置Function
scrollToPosition滚动到指定的位置Function
refreshListData刷新列表数据Function
updateItemTraverse更新条目Function
requestItemLayout条目刷新布局Function
updateItemRange更新条目Function
insertItemRange插入条目Function
updateItemMatched更新条目Function
updateItemMatchedByKey更新条目Function
deleteItemRange删除条目Function
setListData设置列表数据Function
setListDataWithParams设置列表数据Function
addListData添加数据Function
addListDataWithParams添加数据Function
destroy销毁Function
recycle回收Function
scrollToTop滚动到顶部Function
scrollToFocus滚动到焦点Function
prepareForRecycle准备回收Function
setDisplay是否显示Function
changeDisplayState改变显示状态Function
notifySaveInstance请求保存状态Function
updateItemProps更新条目属性Function
updateItem更新条目Function
dispatchItemFunction执行条目方法Function
clearPostTask清空任务Function
clearPostTaskByCate清空任务Function
clearData清空数据Function
pausePostTask暂停任务Function
resumePostTask恢复任务Function
requestLayoutManual手动刷新布局Function
setSpanCount设置格子数量Function
searchReplaceItem请求替换条目Function
setCustomStateEnableOnFocus设置自定义状态在焦点时是否可用Function
setItemCustomState设置条目自定义状态Function
dispatchItemFunctionWithPromise执行条目的方法Function
getScrollOffset获取滚动的偏移量Function

Source

ComponentDocs

Contributors