带有滚动事件处理程序的基于 mx 或 spark 的滚动器示例

Question

我在一个 flex 项目中工作，我需要放置一个滚动条并在滚动事件上添加一个事件处理程序。

现在的问题是我找不到任何合适的例子来完成这个。我得到的是基于 spark 的滚动条示例，但没有对应的事件处理示例，或者我得到的是基于 mx 组件的事件处理示例，但没有对应的滚动条示例！

这是我的代码，基于 SPARK -

<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
    <s:Group id="myScroller" horizontalScrollPosition="0" verticalScrollPosition="0">
        <mx:Canvas width="1800" height="970">
            <main:Main id="main" width="100%" height="100%" userActivityManager="{userActivityManager}"/>
        </mx:Canvas>
    </s:Group>
</s:Scroller>

我正在使用以下基于 SPARK 的事件处理代码 -

myScroller.addEventListener(Event.CHANGE, scrollarChange);
private function scrollarChange(evt:Event):void {
    callLater(dgScroll);
}

private function dgScroll():void {
   trace("horizontalScrollPosition value="+myScroller.horizontalScrollPosition);
}

但是代码没有进入这个 dgScroll() 方法。

基于 SPARK 的代码可以正常工作，但滚动条出现在框架的顶部而不是底部。另外 VScrollBar 实际上并没有覆盖整个屏幕，它只是位于顶部。

private function myScroll():void {
                trace("horizontalScrollPosition value="+myScroller.value);
}

<s:VGroup>
    <s:HScrollBar id="myScroller" width="100%" height="100%" change="myScroll()"/>
    <s:VScrollBar width="100%" height="100%"/>  
            <mx:Canvas width="1800" height="970">
                <main:Main id="main" width="100%" height="100%" userActivityManager="{userActivityManager}"/>
            </mx:Canvas>
</s:VGroup>

这是 MX 基于组件的滚动处理程序方法的示例 -

myList.addEventListener(ScrollEvent.SCROLL, scrollHandler);

function scrollHandler(e:ScrollEvent):void
{
//myList is scrolling
}

但是我没有得到任何适合我的代码的基于 MX 的滚动条示例。

由于 SPARK 滚动器非常适合我的目的，您是否有任何基于 SPARK 的滚动事件处理 的工作示例？将不胜感激。

Answer 1

处理滚动事件最好的方法是通过滚动事件或鼠标事件。如果我想在滚动条滚动时移动屏幕上的任何其他元素，那么移动将通过滚动事件或鼠标事件平滑进行。这是代码-

import flash.events.MouseEvent;

private function onScrollarChange(event:MouseEvent):void {
    //Handle the event, for e.g. move other component accordingly
}

<s:Scroller id="myScroller" width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" mouseMove="onScrollarChange(event)">
    <s:Group id="myScrollerGroup" horizontalScrollPosition="0" verticalScrollPosition="0">
    <mx:Canvas width="1800" height="970">
        <main:Main id="main" width="100%" height="100%" userActivityManager="{userActivityManager}"/>
    </mx:Canvas>
    </s:Group>
</s:Scroller>

谢谢

带有滚动事件处理程序的基于 mx 或 spark 的滚动器示例

Example of mx or spark based scroller with scroll event handler

actionscript-3

air

flex4

mxml