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#定位滚动位置)
|