我有几个不同项目宽度的水平滚动列表堆叠在一个垂直组内。在一个项目上单击其他列表中的所有任何选定项目都将被清除。当滚动任何列表时,所有其他列表应在同一方向滚动完全相同的量,类似于http://www.foxsports.com.au/tvguide。
同步滚动引发了一个未定义的错误,并且有一次使 adl(它是一个移动应用程序)崩溃。仅当我通过事件侦听器添加超过 2 个同步滚动列表时才会发生这种情况。
所以我的问题是:谁能看到为什么会出现这个错误,或者有没有更好的方法来实现这种类型的水平滚动多列表,可能是一个非常宽的数据网格或滚动器内的一组按钮?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="view1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.PropertyChangeEvent;
// listen for scroll event
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
list1.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler1);
list2.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler2);
list3.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler3);
}
// scroll all lists together
private function propertyChangeHandler1(evt:PropertyChangeEvent):void
{
var n:Number = Number(evt.newValue);
list2.dataGroup.horizontalScrollPosition = n;
list3.dataGroup.horizontalScrollPosition = n;
}
private function propertyChangeHandler2(evt:PropertyChangeEvent):void
{
var n:Number = Number(evt.newValue);
list1.dataGroup.horizontalScrollPosition = n;
list3.dataGroup.horizontalScrollPosition = n;
}
private function propertyChangeHandler3(evt:PropertyChangeEvent):void
{
var n:Number = Number(evt.newValue);
list2.dataGroup.horizontalScrollPosition = n;
list1.dataGroup.horizontalScrollPosition = n;
}
// on click clear currently selected
protected function listClickHandler(_iList:int, _index:int):void
{
switch(_iList)
{
case 1:
{
list2.selectedIndex = -1;
list3.selectedIndex = -1;
break;
}
case 2:
{
list1.selectedIndex = -1;
list3.selectedIndex = -1;
break;
}
case 3:
{
list2.selectedIndex = -1;
list1.selectedIndex = -1;
break;
}
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:ArrayCollection id="myArrayCollection">
<fx:Object label="FIRST" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="Printer" message="129.99"/>
<fx:Object label="Notepad" message="2.49"/>
<fx:Object label="Mouse" message="21.79"/>
<fx:Object label="Keyboard" message="32.99"/>
<fx:Object label="Ink" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="Printer" message="129.99"/>
<fx:Object label="Notepad" message="2.49"/>
<fx:Object label="Mouse" message="21.79"/>
<fx:Object label="Keyboard" message="32.99"/>
<fx:Object label="Ink" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="Printer" message="129.99"/>
<fx:Object label="Notepad" message="2.49"/>
<fx:Object label="Mouse" message="21.79"/>
<fx:Object label="Keyboard" message="32.99"/>
<fx:Object label="Ink" message="54.99"/>
<fx:Object label="Stapler" message="3.59"/>
<fx:Object label="LAST" message="32.99"/>
</s:ArrayCollection>
</fx:Declarations>
<s:VGroup id="lists" gap="0" left="0" right="0" top="0" bottom="0" width="180%" height="100%" >
<s:List id="list1" width="100%" click="listClickHandler(1, list1.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
<s:List id="list2" width="100%" click="listClickHandler(2, list2.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
<s:List id="list3" width="100%" click="listClickHandler(3, list3.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
</s:List>
</s:VGroup>
</s:View>