下面的例子中的scrollToIndex()方法向您展示了如何将滚动条滚动至特定的区域。
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/30/setting-the-vertical-scroll-position-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_layout_VerticalLayout_verticalScrollPosition_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:controlBarContent>
<mx:Form styleName="plain">
<mx:FormItem label="verticalScrollPosition:">
<s:HSlider id="slider" />
</mx:FormItem>
</mx:Form>
</s:controlBarContent>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function list_creationCompleteHandler(evt:FlexEvent):void {
slider.maximum = list.dataGroup.contentHeight - list.height;
}
]]>
</fx:Script>
<s:List id="list"
horizontalCenter="0"
verticalCenter="0"
creationComplete="list_creationCompleteHandler(event);">
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
requestedRowCount="4"
verticalScrollPosition="{slider.value}" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:String>The</fx:String>
<fx:String>Quick</fx:String>
<fx:String>Brown</fx:String>
<fx:String>Fox</fx:String>
<fx:String>Jumps</fx:String>
<fx:String>Over</fx:String>
<fx:String>The</fx:String>
<fx:String>Lazy</fx:String>
<fx:String>Dog</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
下面的这个是自动滚动到List内容最下方:
<?xml version="1.0" encoding="utf-8"?>
<!-- shlei.iteye.com -->
<s:Application name="Spark_List_layout_VerticalLayout_verticalScrollPosition_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import flash.utils.clearTimeout;
import flash.utils.setTimeout;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var ac:ArrayCollection=new ArrayCollection();
private var i:int=0;
[Bindable]
private var j:int;
protected function list_creationCompleteHandler(evt:FlexEvent):void {
add();
}
private function add():void{
var k:uint = setTimeout(add,1000);
i++;
ac.addItem(i);
/** 最主要的是下面这句,延迟获取List组件的内容高度最大值,否则拿不到内容高度最大值 **/
if(-5<one())callLater(one);
if(20==i)
clearTimeout(k);
}
private function one():int{
return j=list.dataGroup.contentHeight - list.height;
}
]]>
</fx:Script>
<s:List id="list"
horizontalCenter="0"
verticalCenter="0"
dataProvider="{ac}"
creationComplete="list_creationCompleteHandler(event);">
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
requestedRowCount="4"
verticalScrollPosition="{j}" />
</s:layout>
</s:List>
</s:Application>
参考 http://blog.flexexamples.com/2007/11/08/scrolling-to-a-specific-index-in-a-flex-list-control/
by Peter Dehaan and others
分享到:
相关推荐
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用
详解Flex4的系统组件与基本组件。让你在应用的时候知道用什么.
Flex4中使用组件添加柱状图、饼状图等图表
flex4 选择树组件。可以直接使用组件包。在Test.mxml里面有使用的测试。
你还在头痛flex4组件皮肤怎么自定义吗?看我给你们上传的吧;因皮肤中还是有部分mx组件,如果不能正常使用,请自己把所以mx组件改成sp组件
Flex3组件介绍,包含flex3的所有组件介绍并有例子
Flex中不用ScrollBar实现滚动效果
这个是我一直在用的针对于组件全屏的一个类,这里是页面上的某个组件全屏,而不是整个页面全屏。 这是原始的库了,里面少了一个针对按下ESC键的处理,这个在使用的时候可以自己加,另外一个问题就是由于这个库是FLEX...
Flex布局之关于组件的大小 Flex布局之关于组件的大小
在使用list的例子,mxml组件代码。仅单个组件
flex tree 自动显示横向滚动条 自定义重写
JSP调用Flex4组件演示代码 FLEX4源码项目 JSP WEB源码项目 非常经典的演示DEMO,完全测试成功。
此组件是基于flex4的List 自定义了全选,反选功能
flex三种实现滚动条方式,其实是两种,样式的以两种表现形式写出了。然后,自定了一个滚动条
实例说明了 Flex4中 Menu和List的使用。
很通用的Flex 分页组件,经过本人测试,可以应用到项目中,很方便
通过修改flex4滚动条的皮肤来修改Scroller组件的外观,外观直接去除了上下箭头,可以自行改变滚动条的皮肤颜色,投影颜色等。滚动条更加现代化。
flex4中tree组件分层显示数据示例代码(可直接运行)
Flex4组件 - 对话泡泡,供大家一起共同分享学习。