75 lines
2.2 KiB
Markdown
75 lines
2.2 KiB
Markdown
|
列表组件 List ，继承自 DataGroup，它和 DataGroup 的区别在于：
|
|||
|
|
|
|||
|
|
* 在 List 中选中一项，会触发 `eui.ItemTapEvent.ITEM_TAP` 事件。
|
|||
|
|
* List有选中项的概念，可以设置 List 中的默认选中项。
|
|||
|
|
|
|||
|
|
下面是List的基本用法：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
class Main extends eui.Group {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
}
|
|||
|
|
private list:eui.List;
|
|||
|
|
protected createChildren() {
|
|||
|
|
super.createChildren();
|
|||
|
|
var exml = `
|
|||
|
|
<e:Skin xmlns:e="http://ns.egret.com/eui" states="up,down" height="50"> <e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0" verticalCenter="0"/> </e:Skin>`;
|
|||
|
|
var list = new eui.List();
|
|||
|
|
list.dataProvider = new eui.ArrayCollection(["item1","item2","item3"]);
|
|||
|
|
list.itemRendererSkinName = exml;
|
|||
|
|
this.addChild(list);
|
|||
|
|
this.list = list;
|
|||
|
|
list.selectedIndex = 1;//设置默认选中项
|
|||
|
|
list.addEventListener(eui.ItemTapEvent.ITEM_TAP,this.onChange,this);
|
|||
|
|
}
|
|||
|
|
private onChange(e:eui.PropertyEvent):void{
|
|||
|
|
//获取点击消息
|
|||
|
|
console.log(this.list.selectedItem,this.list.selectedIndex)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
~~~
|
|||
|
|
效果如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
~~~
|
|||
|
|
设置默认选中项
|
|||
|
|
list.selectedIndex = 1;
|
|||
|
|
~~~
|
|||
|
|
~~~
|
|||
|
|
获取当前选中项的信息
|
|||
|
|
list.selectedItem
|
|||
|
|
list.selectedIndex
|
|||
|
|
~~~
|
|||
|
|
## 多选状态
|
|||
|
|
List 还可以开启多选状态
|
|||
|
|
|
|||
|
|
~~~ TypeScript
|
|||
|
|
list.allowMultipleSelection = true;
|
|||
|
|
~~~
|
|||
|
|
效果如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
多选状态下，List 中所有的条目都可以被选中，再次点击选中的条目则会取消选中，恢复原状。
|
|||
|
|
|
|||
|
|
此时监听 `eui.ItemTapEvent.ITEM_TAP` 事件，可以通过下面两个属性获得一个数组，里面包含了当前处于选中状态的项目：
|
|||
|
|
|
|||
|
|
~~~
|
|||
|
|
list.selectedIndices
|
|||
|
|
list.selectedItems
|
|||
|
|
~~~
|
|||
|
|
在多选状态下还有一个命令可以配合使用：
|
|||
|
|
|
|||
|
|
~~~ TypeScript
|
|||
|
|
list.requireSelection = true;
|
|||
|
|
~~~
|
|||
|
|
该属性设置为 true 后，多选状态下最少有一个条目会被选中，不可以被取消。
|
|||
|
|
|
|||
|
|
## 滚动列表
|
|||
|
|
|
|||
|
|
列表配合 Scroller 使用可以实现滚动效果。
|
|||
|
|
|
|||
|
|
具体参考文档：[定位滚动位置](../../container/scroller/README.md#定位滚动位置)
|