列表(list)组件
本文将介绍List(List)组件的使用,List组件功能分【内容】及【样式】两块选项,用户根据自己的需求进行内容的编辑及样式的修改

一、内容
1、数据
1.1 数据项
选项这里可以通过【数据源查询】、【Api查询】动态将数据绑定到List组件上,也支持绑定静态数据

- 可以参考静态数据结构
[
{
"id": "001",
"name": "Blue",
"img": "https://assets.appsmith.com/widgets/default.png"
},
{
"id": "002",
"name": "Green",
"img": "https://assets.appsmith.com/widgets/default.png"
},
{
"id": "003",
"name": "Red",
"img": "https://assets.appsmith.com/widgets/default.png"
}
]
如果检索到的数据不是所需的格式,你可以使用JavaScript来进行转换,再绑定到List组件上,以一个名为{{fetchData.data}}的查询为例子
{{fetchData.data.users.map((user) => {
return {
name: user.name,
email: user.email
};
});
}}
1.2 数据标识符

2、分页
2.1 服务端分页
可以控制List组件是否开启服务端分页效果,开启服务端分页后,可以配置总数据行数及onPageChange事件

2.1.1 总数据行数
该功能只有服务端分页功能打开时才会出现
可以根据当前list组件中列表项数量及填写的总数据行数,显示对应的分页数据,也可以通过{{ }}的方式进行填写

2.1.2 onPageChange
该功能只有服务端分页功能打开时才会出现,点击旁边的JS图标可以自行编写代码
可以设置当用户点击Lis组件中的分页按钮时触发的事件动作

3、通用
3.1 是否显示
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以控制List组件在页面上是否可见

3.2 加载时显示动画
可以控制List组件在数据加载渲染的时候是否显示动画效果

4、事件
4.1 onItemClick
点击旁边的JS图标可以自行编写代码
可以设置用户点击List组件中的列表项,触发的事件动作

二、组件属性
List组件支持多种属性供用户灵活开发,后面将挑选几个常用属性进行描述
如需了解更多,可以在画布中拖入一个text文本组件,可以看下面的示例
{{List1}}

2.1 backgroundColor
该属性可以获取到当前List组件背景颜色的值,可以看下面的示例:
{{List1.backgroundColor}}

2.2 currentItemView
该属性可以获取到当前List组件中列表项的数据信息,信息内容是一个对象数组,可以看下面的示例:
{{List1.currentItemsView}}

2.3 isVisible
该属性可以反应组件的可见状态,是True还是False,可以看下下面的示例:
{{List1.isVisible}}

2.4 itemSpacing
该属性可以获取到当前List组件中列表项与列表项之间的高度间距,可以看下面的示例:
{{List1.itemSpacing}}

2.5 listData
该属性可以获取到当前List组件中列表项的数据信息,是一个对象数组,可以看下面的示例:
{{List1.listData}}

2.6 pageNo
该属性可以获取到List组件的当前页数,可以看下面的示例:
{{List1.pageNo}}

2.7 pageSize
该属性可以获取到当前List组件中列表项的数量,可以看下面的示例:
{{List1.pageSize}}

2.8 selectedItem
该属性可以获取到当前选择的列表项数据,可以看下面的示例:
{{List1.selectedItem}}

2.9 selectedItemView
该属性可以获取到当前选择列表项中组件的属性信息,可以看下面的示例:
{{List1.selectedItemView}}

2.10 triggeredItem
该属性可以获取到当前选择列表项中的数据信息,可以看下面的示例:
{{List1.triggeredItem}}

三、列表项的属性
3.1 currentItem
该属性可以获取到list组件的数据,可以看下面的示例:
{{currentItem.id}}

3.2 currentIndex

{{currentIndex}}

3.3 currentView
该属性可以获取到当前列表项中组件的属性信息,可以看下面的示例:
{{currentView.Text3}}

四、组件属性设置方法
该方法支持在应用运行的过程中对组件属性的值进行修改,这些方法是异步的并返回Promise。你可以使用.then()来确保PagePlug中后续代码行的执行和排序
4.1 setVisibility
该方法可以设置isVisible属性的值,可以看下面的示例:
{{List1.setVisibility(false)}}

如果要执行顺序操作,请使用.then(),可以看下面的示例:
{{List1.setVisibility(false)}}.then(() => {
})