Question

尝试滚动2个列表，并禁用其原生滚动条，并在其右侧添加1个滚动条。

我尝试将每个List的视口设置为滚动条，当它工作时它只是将滚动条实例化到每个列表而不是使用1.

基本上我试图让它们同时垂直滚动，同时只拖动1个滚动条拇指。

Answer 1

我认为这是一个有趣的问题，并进行了一些调查。这就是我想出来的。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           initialize="application1_initializeHandler(event)"
           creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
    <![CDATA[
        import flashx.textLayout.container.ScrollPolicy;

        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;
        [Bindable] private var dp:ArrayCollection = new ArrayCollection();
        protected function application1_initializeHandler(event:FlexEvent):void
        {
            //Add some dummy content
            for (var i:int=0; i<20; i++){
                dp.addItem("Test Item " + i);
            }
            //Turn off vertical scrolling for the two lists
            list1.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.OFF);
            list2.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.OFF);
        }


        protected function vScroll_changeHandler(event:Event):void
        {
            //Set the maximum of the one scroll bar to equal the maximum value of the hidden scroll bar
            vScroll.maximum = list1.scroller.verticalScrollBar.maximum;
            //Set the scroll position of the two hidden scroll bars to the value of the visible bar
            list1.scroller.verticalScrollBar.value = vScroll.value;
            list2.scroller.verticalScrollBar.value = vScroll.value;
        }


        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            //Initialize the maximum value to the value of the hidden scroll bar after data has been loaded
            vScroll.maximum = list1.scroller.verticalScrollBar.maximum;
        }

    ]]>
</fx:Script>

<s:HGroup>
    <s:List id="list1" dataProvider="{dp}" height="200"/>

    <s:List id="list2" dataProvider="{dp}" height="200"/>
    <s:VScrollBar id="vScroll" height="200" change="vScroll_changeHandler(event)"/>
</s:HGroup>

</s:Application>

使用1个滚动器Flex 4滚动2个列表

1 个答案: