egret开发系列之scoller+list列表使用

在 Egret 开发中，我们常常会用到列表组件来展示一系列的数据。而在 Egret 中，我们可以使用 Scroller 和 List 来实现列表的展示。

Scroller 是一个容器组件，它可以在垂直或水平方向上滚动。List 是一个基于 Scroller 组件实现的列表组件，它可以根据数据源自动生成列表项，并支持滚动。

下面是使用 Scroller 和 List 的一般步骤：

1. 首先，在你的项目中引入 Scroller 和 List 组件：

import { Scroller } from 'eui'; import { List } from 'eui'; 

2. 创建一个 Scroller 实例，并设置它的滚动方向和尺寸。例如，如果你想创建一个垂直滚动的列表，可以这样做：

const scroller = new Scroller(); scroller.width = 300; scroller.height = 400; scroller.scrollPolicyV = 'on'; 

3. 创建一个 List 实例，并设置它的数据源和项渲染器。数据源是一个数组，每个元素表示一个列表项的数据。项渲染器可以是一个自定义的项渲染器类，也可以是一个函数。例如，如果你想使用默认的项渲染器类，可以这样做：

const list = new List(); list.itemRenderer = eui.ItemRenderer; list.dataProvider = [1, 2, 3, 4, 5]; 

4. 将 List 添加到 Scroller 的视图内容中，并将 Scroller 添加到舞台中。例如：

scroller.viewport = list; this.addChild(scroller); 

5. 最后，你可以根据需要对 Scroller 和 List 进行进一步的设置，比如设置滚动条的样式、添加事件监听等。

以上就是使用 Scroller 和 List 实现列表的基本步骤。通过调整 Scroller 和 List 的属性和样式，你可以实现更多的列表展示效果。