Egret Scroller + List 实现滑动列表

最新推荐文章于 2025-03-12 20:18:55 发布

吴海生---

最新推荐文章于 2025-03-12 20:18:55 发布

阅读量1.6w

点赞数

分类专栏：归档文章标签： Egret

本文链接：https://blog.youkuaiyun.com/wuhaishengxxx/article/details/54863897

版权

本文介绍了如何使用Egret框架中的eui.Scroller和eui.List组件来创建滑动列表，特别强调了在处理大量数据时使用虚拟布局和自定义项呈现器以提高性能。通过Scroller负责滚动控制，List负责显示选项，实现了在背包、商品、成就和任务列表等场景下的应用。同时，文章提到了初始化Item的两种方法——initItemSkin和initItemRenderer，并讨论了item点击事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eui.Scroller 滚动控制容器,是一个常用的组件，详见官方链接：
http://developer.egret.com/cn/github/egret-docs/extension/EUI/container/scroller/index.html
效果：
效果演示
Scroller常结合List使用，Scroller负责控制滑动，List负者呈现选项，常在背包物品列表、商品列表、成就列表、任务列表等中使用，通常会有许多项，少的几个多者上百上千，数量庞大，如果直接通过addChild方法添加，就会造成性能上的问题。而直接使用List的虚拟布局将会大幅度提升性能。
效果代码：

        <e:Scroller id="scro" width="100%" height="100%" verticalCenter="0" horizontalCenter="0" scrollPolicyV="on"
                    bottom="10" left="10" right="10" top="10">
            <!-- itemRendererSkinName 为选项的皮肤 -->
            <e:List id="dataList" width="100%" height="100%" x=