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

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

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

现在的问题是我无法获得任何合适的示例来完成此操作。要么我得到了基于 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 的滚动事件处理的工作示例？会很感激的。

解决方法

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

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>

谢谢