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. 梅科尔工作室-郜翱翔-鸿蒙笔记1

    鸿蒙简介 华为鸿蒙系统(HUAWEI Harmony OS),是华为公司在2019年8月9日于东莞举行华为开发者大会(HDC.2019)上正式发布的操作系统. 华为鸿蒙系统是一款全新的面向全场景的分布 ...

  2. 梅科尔工作室-郜翱翔-鸿蒙笔记4

    @ohos.router (页面路由) 导入模块 import router from'@ohos.router' router.push push(options: RouterOptions): ...

  3. 梅科尔工作室-郜翱翔-鸿蒙笔记2

    Text 子组件 可以包含Span子组件. 接口 Text(content?: string | Resource) 参数: 参数名 参数类型 必填 参数描述 content string | Res ...

  4. 梅科尔工作室E1-张冉-鸿蒙笔记4

    @ohos.router (页面路由) 导入模块 import router from'@ohos.router' router.push push(options: RouterOptions): ...

  5. 梅科尔工作室-于天姿-鸿蒙笔记4

    一.路由跳转 1.导入 首先导入router模块 2.跳转方式 方式一 router.push(),跳转到指定页面. 每调用一次router.push()方法,均会新建一个页面.默认情况下,页面栈数量 ...

  6. 梅科尔工作室E1-张冉-鸿蒙笔记2

    文本 基本操作 资料 针对包含文本元素的组件,例如Text.Span.Button.TextInput等,可使用fontColor.fontSize.fontStyle. fontWeight.fon ...

  7. 梅科尔工作室-杨灿-鸿蒙笔记1

    1.主要目录配置文件作用 stage模型下: AppScope>app.json5           是应用的全局的配置文件,用于存放应用           公共的配置信息. entry模块 ...

  8. 梅科尔工作室-张黎娜-鸿蒙笔记3

    list组件 由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器. 使用说明 父子组件(自定义组件) 子组件导出用export语句 子组件中不能 ...

  9. 梅科尔工作室-徐锦航-鸿蒙笔记2

    基础组件的应用 常用基础组件 Image:渲染.展示图片,支持加载网络和本地图片 Text Textinput:输入单行文本 Button:响应点击操作 构建简单的页面 容器组件 有两个横向布局,所以 ...

最新文章

  1. Android 快捷方式的创建与查询 快捷方式问题大全 获取快捷方式在Launcher数据库中的信息 Failed to find provider info for com.android.la
  2. scala_until
  3. 【PC工具】常用USB转串口芯片CH340G,驱动安装有可能遇到的问题及解决办法
  4. List类集接口-ArrayList
  5. 如何理解 JAVA 中的 volatile 关键字
  6. 层 数据仓库_小尝试:基于指标体系的数据仓库搭建和数据可视化
  7. Python IO 基本编程示例
  8. 爬虫常用Xpath和CSS3选择器对比
  9. JavaScript入门→HTML引用JS、变量、表达式操作符、数组Array数组对象、选择结构循环结构、函数、JavaScript与JAVA区别
  10. 如何在Python中读取属性文件?
  11. linux 列出指定目录下所有文件的 列表集合
  12. 星巴克推出含萃取后咖啡粉制作的渣渣管;麦咖啡四款新品登陆全国1600家门店;可口可乐业绩恢复至疫情前水平 | 美通企业日报...
  13. 3.4 51单片机-矩阵键盘
  14. 【课程学习】武汉理工大学·高性能计算机网络(学堂在线)学习笔记
  15. vue2项目中给echarts地图设置背景图和打点
  16. 企业微信好友无上限,私域流量即将迎来春天?
  17. Various Image/Video Caption(视觉字幕化新任务)
  18. 美团点评2020年秋季校园招聘启动啦
  19. payjs 源码_WordPress插件:Payjs For Ponits基于Payjs开发的积分充值微信支付插件
  20. SCI期刊名缩写查询

热门文章

  1. pc文件预览--xls、xlsx、doc、docx、ppt、pptx、txt
  2. 海贼王热血航线服务器维护4月,《航海王热血航线》4月29日停服更新公告
  3. maya mel新手入门要注意的小地方
  4. NBA球星管理系统----C语言链表带文件
  5. vmware虚拟机强制关闭后再开启黑屏的几种解决方法
  6. 心理学与经济学的相通性
  7. il2cpp_IL2CPP优化:避免装箱
  8. D. Petya and Array(树状数组 + 前缀和 + 逆序对的思想)
  9. 绘制圆角矩形和八角形
  10. anaconda配置python环境