eui.Scroller

包 eui

类 public class Scroller

继承 eui.Scroller → eui.Component → egret.DisplayObjectContainer → egret.DisplayObject → egret.EventDispatcher → egret.HashObject

Scroller 组件显示一个称为视域的单个可滚动组件，以及水平滚动条和垂直滚动条。该视域必须实现 IViewport 接口。Group 组件实现 IViewport 接口，且可以用作 Scroller 控件的子代，如下例所示：

      <s:Scroller width="100" height="100">

          <s:Group>

              <s:Image width="300" height="400" source="assets/logo.jpg"/>

          </s:Group>

      </s:Scroller>

Image 控件的大小比其父 Group 容器设置得大。默认情况下，子代超过父容器的边界。Scroller 会指定将子代剪切到边界并显示滚动条，而不是让子代超过父容器的边界。

公共属性

属性
bounces : boolean 是否启用回弹，当启用回弹后，ScrollView中内容在到达边界后允许继续拖动，在用户拖动操作结束后，再反弹回边界位置
horizontalScrollBar : eui.HScrollBar 水平滚动条
scrollPolicyH : string 指示在哪些条件下可以滚动并且显示水平滑动条
scrollPolicyV : string 指示在哪些条件可以滚动并且显示垂直滑动条
scrollThreshold : number [静态]开始触发滚动的阈值（以像素为单位），当触摸点偏离初始触摸点的距离超过这个值时才会触发滚动
throwSpeed : number 调节滑动结束时滚出的速度
verticalScrollBar : eui.VScrollBar 垂直滚动条
viewport : eui.IViewport 要滚动的视域组件

公共方法

方法
Scroller() 构造函数
stopAnimation():void 停止滚动的动画

事件

Events
eui.UIEvent.CHANGE_START 滚动位置改变开始
eui.UIEvent.CHANGE_END 滚动位置改变结束
egret.Event.CHANGE 滚动位置改变的时候
egret.TouchEvent.TOUCH_CANCEL 取消触摸事件
egret.Event.COMPLETE 当设置skinName为外部exml文件路径时，加载并完成EXML解析后调度。
egret.Event.RESIZE 当UI组件的尺寸发生改变时调度
eui.UIEvent.MOVE 当UI组件在父级容器中的位置发生改变时调度
eui.UIEvent.CREATION_COMPLETE 当UI组件第一次被添加到舞台并完成初始化后调度
egret.Event.ADDED 将显示对象添加到显示列表中时调度。
egret.Event.ADDED_TO_STAGE 在将显示对象直接添加到舞台显示列表或将包含显示对象的子树添加至舞台显示列表中时调度。
egret.Event.REMOVED 将要从显示列表中删除显示对象时调度。
egret.Event.REMOVED_FROM_STAGE 在从显示列表中直接删除显示对象或删除包含显示对象的子树时调度。
egret.Event.ENTER_FRAME [广播事件] 播放头进入新帧时调度。
egret.Event.RENDER [广播事件] 将要更新和呈现显示列表时调度。
egret.TouchEvent.TOUCH_MOVE 当用户触碰设备时进行调度，而且会连续调度，直到接触点被删除。
egret.TouchEvent.TOUCH_BEGIN 当用户第一次触摸启用触摸的设备时（例如，用手指触摸手机屏幕）调度。
egret.TouchEvent.TOUCH_END 当用户移除与启用触摸的设备的接触时（例如，将手指从屏幕上抬起）调度。
egret.TouchEvent.TOUCH_TAP 当用户在启用触摸设备上的已启动接触的同一 DisplayObject 实例上抬起接触点时（例如，手机点击屏幕后抬起）调度。
egret.TouchEvent.TOUCH_RELEASE_OUTSIDE 当用户在启用触摸设备上的已启动接触的不同 DisplayObject 实例上抬起接触点时（例如，按住屏幕上的某个对象,然后从它上面挪开后再松开手指）调度。

属性详细信息

bounces

bounces : boolean = true

支持版本:Egret 2.5.6
运行平台:Web,Native

是否启用回弹，当启用回弹后，ScrollView中内容在到达边界后允许继续拖动，在用户拖动操作结束后，再反弹回边界位置

horizontalScrollBar

horizontalScrollBar : eui.HScrollBar = null

支持版本:eui 1.0
运行平台:Web,Native

水平滚动条

scrollPolicyH

scrollPolicyH : string = ScrollPolicy.AUTO

支持版本:eui 1.0
运行平台:Web,Native

指示在哪些条件下可以滚动并且显示水平滑动条。ScrollPolicy.ON - 可以滚动，滚动时显示滚动条。ScrollPolicy.OFF - 不可以滚动并且不显示滚动条。ScrollPolicy.AUTO - 当视域的 contentWidth 大于其自身的宽度时可以滚动，滚动时显示滚动条。

scrollPolicyV

scrollPolicyV : string = ScrollPolicy.AUTO

支持版本:eui 1.0
运行平台:Web,Native

指示在哪些条件可以滚动并且显示垂直滑动条。ScrollPolicy.ON - 可以滚动，滚动时显示滚动条。ScrollPolicy.OFF - 不可以滚动并且不显示滚动条。ScrollPolicy.AUTO - 当视域的 contentHeight 大于其自身的高度时可以滚动，滚动时显示滚动条。

scrollThreshold

scrollThreshold : number = 5

支持版本:eui 1.0
运行平台:Web,Native

开始触发滚动的阈值（以像素为单位），当触摸点偏离初始触摸点的距离超过这个值时才会触发滚动。

throwSpeed

throwSpeed : number

支持版本:eui 1.0
运行平台:Web,Native

调节滑动结束时滚出的速度。等于0时，没有滚动动画

verticalScrollBar

verticalScrollBar : eui.VScrollBar = null

支持版本:eui 1.0
运行平台:Web,Native

垂直滚动条

viewport

viewport : eui.IViewport

支持版本:eui 1.0
运行平台:Web,Native

要滚动的视域组件。

方法详细信息

Scroller()

public Scroller()

构造函数。

支持版本:eui 1.0
运行平台:Web,Native

stopAnimation()

public stopAnimation():void

停止滚动的动画

支持版本:eui 1.0
运行平台:Web,Native

示例

**

* 下面的例子显示了一个垂直带滚动条的 List。

*/

class  ScrollerExample  extends  egret.Sprite  {

public  constructor()  {

super();

var exml =

`<e:Group xmlns:e="http:/ns.egret.com/eui">

<e:Image width="200" height="400" source="resource/selected.png" scale9Grid="1,1,4,4"/>

<e:Scroller >

<e:Skin>

<e:HScrollBar id="horizontalScrollBar" width="100%" height="30" bottom="0">

<e:Skin>

<e:Image width="100%" height="100%" source="resource/track.png" scale9Grid="1,1,4,4"/>

<e:Image id="thumb" width="30" height="30" source="resource/thumb.png" scale9Grid="1,1,4,4"/>

</e:Skin>

</e:HScrollBar>

<e:VScrollBar id="verticalScrollBar" width="30" height="100%" right="0">

<e:Skin>

<e:Image width="100%" height="100%" source="resource/track.png" scale9Grid="1,1,4,4"/>

<e:Image id="thumb" width="30" height="30" source="resource/thumb.png" scale9Grid="1,1,4,4"/>

</e:Skin>

</e:VScrollBar>

</e:Skin>

<e:List id="list" width="200" height="400">

<e:layout>

<e:VerticalLayout gap="20"/>

</e:layout>

<e:itemRendererSkinName>

<e:Skin states="up,down,disabled" height="50">

<e:Label text="{data.label}" textColor="0" horizontalCenter="0" verticalCenter="0"/>

</e:Skin>

</e:itemRendererSkinName>

<e:ArrayCollection>

<e:Array>

<e:Object label="Text1"/>

<e:Object label="Text2"/>

<e:Object label="Text3"/>

<e:Object label="Text4"/>

<e:Object label="Text5"/>

<e:Object label="Text6"/>

<e:Object label="Text7"/>

<e:Object label="Text8"/>

<e:Object label="Text9"/>

<e:Object label="Text10"/>

</e:Array>

</e:ArrayCollection>

</e:List>

</e:Scroller>

</e:Group>`;

var clazz =  EXML.parse(exml);

var scroller =  new  clazz();

this.addChild(scroller);

}

}

eui.Scroller

公共属性​

公共方法​

事件​

属性详细信息​

bounces​

horizontalScrollBar​

scrollPolicyH​

scrollPolicyV​

scrollThreshold​

throwSpeed​

verticalScrollBar​

viewport​

方法详细信息​

Scroller()​

stopAnimation()​

示例​