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

egret

小亿

108

2023-12-19 07:57:49

栏目: 编程语言

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

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

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

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

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

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

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

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

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

最新问答