梅科尔工作室-郜翱翔-鸿蒙笔记3
LIST
子组件
包含ListItem子组件。
接口
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
参数:
参数名 |
参数类型 |
必填 |
参数描述 |
space |
number | string |
否 |
列表项间距。 默认值:0 |
initialIndex |
number |
否 |
设置当前List初次加载时视口起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值,则设置不生效。 默认值:0 |
scroller |
Scroller |
否 |
可滚动组件的控制器。用于与可滚动组件进行绑定。 |
属性
名称 |
参数类型 |
描述 |
listDirection |
Axis |
设置List组件排列方向参照Axis枚举说明。 默认值:Vertical |
divider |
{ strokeWidth: Length, color?: ResourceColor, startMargin?: Length, endMargin?: Length } | null |
用于设置ListItem分割线样式,默认无分割线。 strokeWidth: 分割线的线宽。 color: 分割线的颜色。 startMargin: 分割线与列表侧边起始端的距离。 endMargin: 分割线与列表侧边结束端的距离。 |
scrollBar |
BarState |
设置滚动条状态。 默认值:BarState.Off |
cachedCount |
number |
设置预加载的ListItem的数量。具体使用可参考减少应用白块说明。 默认值:1 |
editMode |
boolean |
声明当前List组件是否处于可编辑模式。 默认值:false |
edgeEffect |
EdgeEffect |
滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 默认值:EdgeEffect.Spring |
chainAnimation |
boolean |
用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。 - false:不启用链式联动。 - true:启用链式联动。 默认值:false |
multiSelectable8+ |
boolean |
是否开启鼠标框选。 >默认值:false - false:关闭框选。 - true:开启框选。 |
事件
名称 |
功能描述 |
onItemDelete(event: (index: number) => boolean) |
列表项删除时触发。 |
onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) |
列表滑动时触发,返回值scrollOffset为滑动偏移量,scrollState为当前滑动状态。 |
onScrollIndex(event: (start: number, end: number) => void) |
列表滑动时触发,返回值分别为滑动起始位置索引值与滑动结束位置索引值。 |
onReachStart(event: () => void) |
列表到达起始位置时触发。 |
onReachEnd(event: () => void) |
列表到底末尾位置时触发。 |
onScrollStop(event: () => void) |
列表滑动停止时触发。 |
onItemMove(event: (from: number, to: number) => boolean) |
列表元素发生移动时触发,返回值from、to分别为移动前索引值与移动后索引值。 |
onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) | void)) |
开始拖拽列表元素时触发,返回值event见ItemDragInfo对象说明,itemIndex为被拖拽列表元素索引值。 |
onItemDragEnter(event: (event: ItemDragInfo) => void) |
拖拽进入列表元素范围内时触发,返回值event见ItemDragInfo对象说明。 |
onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) |
拖拽在列表元素范围内移动时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置。 |
onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) |
拖拽离开列表元素时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽离开的列表元素索引值。 |
onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) |
绑定该事件的列表元素可作为拖拽释放目标,当在列表元素内停止拖拽时触发,返回值event见ItemDragInfo对象说明,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置,isSuccess为是否成功释放。 |
ScrollState枚举说明
名称 |
描述 |
Idle |
未滑动状态。 |
Scroll |
惯性滑动状态。 |
Fling |
手指拖动状态。 |
说明
List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件:
editMode属性设置为true。
绑定onItemDelete事件,且事件回调返回true。
ListItem的editable属性设置为true。
实现ListItem拖拽,需满足以下条件:
editMode属性设置为true。
绑定onDragStart事件,且事件回调中返回浮动UI布局。
LISTLTEM
子组件
可以包含单个子组件。
接口
ListItem(value?: string)
属性
名称 |
参数类型 |
默认值 |
描述 |
sticky |
Sticky |
Sticky.None |
设置ListItem吸顶效果,参见Sticky枚举描述。 默认值:Sticky.None |
editable |
boolean | EditMode |
false |
当前ListItem元素是否可编辑,进入编辑模式后可删除或移动。 默认值:false |
selectable8+ |
boolean |
true |
当前ListItem元素是否可以被鼠标框选。 默认值:true 说明: 外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
Sticky枚举说明
名称 |
描述 |
None |
无吸顶效果。 |
Normal |
当前item吸顶。 |
Opacity |
当前item吸顶显示透明度变化效果。 |
EditMode枚举说明
名称 |
描述 |
None |
编辑操作不限制。 |
Deletable |
可删除。 |
Movable |
可移动。 |
事件
名称 |
功能描述 |
onSelect(event: (isSelected: boolean) => void)8+ |
ListItem元素被鼠标框选的状态改变时触发回调。 isSelected:进入鼠标框选范围即被选中返回true, 移出鼠标框选范围即未被选中返回false。 |
梅科尔工作室-郜翱翔-鸿蒙笔记3相关推荐
- 梅科尔工作室-郜翱翔-鸿蒙笔记1
鸿蒙简介 华为鸿蒙系统(HUAWEI Harmony OS),是华为公司在2019年8月9日于东莞举行华为开发者大会(HDC.2019)上正式发布的操作系统. 华为鸿蒙系统是一款全新的面向全场景的分布 ...
- 梅科尔工作室-郜翱翔-鸿蒙笔记4
@ohos.router (页面路由) 导入模块 import router from'@ohos.router' router.push push(options: RouterOptions): ...
- 梅科尔工作室-郜翱翔-鸿蒙笔记2
Text 子组件 可以包含Span子组件. 接口 Text(content?: string | Resource) 参数: 参数名 参数类型 必填 参数描述 content string | Res ...
- 梅科尔工作室E1-张冉-鸿蒙笔记4
@ohos.router (页面路由) 导入模块 import router from'@ohos.router' router.push push(options: RouterOptions): ...
- 梅科尔工作室-于天姿-鸿蒙笔记4
一.路由跳转 1.导入 首先导入router模块 2.跳转方式 方式一 router.push(),跳转到指定页面. 每调用一次router.push()方法,均会新建一个页面.默认情况下,页面栈数量 ...
- 梅科尔工作室E1-张冉-鸿蒙笔记2
文本 基本操作 资料 针对包含文本元素的组件,例如Text.Span.Button.TextInput等,可使用fontColor.fontSize.fontStyle. fontWeight.fon ...
- 梅科尔工作室-杨灿-鸿蒙笔记1
1.主要目录配置文件作用 stage模型下: AppScope>app.json5 是应用的全局的配置文件,用于存放应用 公共的配置信息. entry模块 ...
- 梅科尔工作室-张黎娜-鸿蒙笔记3
list组件 由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器. 使用说明 父子组件(自定义组件) 子组件导出用export语句 子组件中不能 ...
- 梅科尔工作室-徐锦航-鸿蒙笔记2
基础组件的应用 常用基础组件 Image:渲染.展示图片,支持加载网络和本地图片 Text Textinput:输入单行文本 Button:响应点击操作 构建简单的页面 容器组件 有两个横向布局,所以 ...
最新文章
- Android 快捷方式的创建与查询 快捷方式问题大全 获取快捷方式在Launcher数据库中的信息 Failed to find provider info for com.android.la
- scala_until
- 【PC工具】常用USB转串口芯片CH340G,驱动安装有可能遇到的问题及解决办法
- List类集接口-ArrayList
- 如何理解 JAVA 中的 volatile 关键字
- 层 数据仓库_小尝试:基于指标体系的数据仓库搭建和数据可视化
- Python IO 基本编程示例
- 爬虫常用Xpath和CSS3选择器对比
- JavaScript入门→HTML引用JS、变量、表达式操作符、数组Array数组对象、选择结构循环结构、函数、JavaScript与JAVA区别
- 如何在Python中读取属性文件?
- linux 列出指定目录下所有文件的 列表集合
- 星巴克推出含萃取后咖啡粉制作的渣渣管;麦咖啡四款新品登陆全国1600家门店;可口可乐业绩恢复至疫情前水平 | 美通企业日报...
- 3.4 51单片机-矩阵键盘
- 【课程学习】武汉理工大学·高性能计算机网络(学堂在线)学习笔记
- vue2项目中给echarts地图设置背景图和打点
- 企业微信好友无上限,私域流量即将迎来春天?
- Various Image/Video Caption(视觉字幕化新任务)
- 美团点评2020年秋季校园招聘启动啦
- payjs 源码_WordPress插件:Payjs For Ponits基于Payjs开发的积分充值微信支付插件
- SCI期刊名缩写查询