Question

我根据Steven Shongrunden的优秀文章http://flexponential.com/2009/10/09/changing-the-position-of-the-scroll-bars-in-a-spark-list/修改了我的VScrollBar的滚动皮肤，所以只有向上和向下按钮，没有滚动条。

现在我想修改滚动条的行为，以便每次单击滚动一页。更好的是，我希望使用缓动滚动动画，即不从页面跳转到页面，而是滚动动画。

ScrollBarBase http://www.flex-component.com/asdoc/kcdualslider/spark/components/supportClasses/ScrollBarBase.html的文档提供了许多方法来提供实现这一目标的方法，但我找不到任何关于如何使用这些优秀方法和属性的示例：

animatePaging(newValue:Number, pageSize:Number): 
  Animates the operation to move to newValue.

button_buttonDownHandler(event:Event): 
  Handles a click on the increment or decrement button      

button_buttonUpHandler(event:Event): 
  Handles releasing the increment or decrement button

decrementButton:Button
  An optional skin part that defines a button that, when pressed, steps the scrollbar up.

incrementButton:Button
  An optional skin part that defines a button that, when pressed, steps the scrollbar down.

我的预感是我需要中断button_buttonUp / DownHandlers for decrementButton和incrementButton并调用animatePaging，但我真的不知道如何做到这一点。尽管已经写了大量的AS3并且成功修改了很多皮肤，但这些火花皮仍然让我神秘不堪。

期待任何见解！

谢谢！

Answer 1

我找到了问题的解决方案。

我需要扩展VScrollBar类。一旦我这样做，这是一个简单的事情来覆盖button_buttonDown / UpHandlers。

扩展了VScrollBar类，在我的皮肤中，我替换了

<my_namespace:CustomVScrollBar for  <s:VScrollBar

这是我的CustomVScrollBar的要点。我正在使用gs.TweenLite，但你可以使用任何tweener来制作动画

package my_package {

    import flash.events.Event;
    import gs.TweenLite;
    import spark.components.VScrollBar;



    public class CustomVScrollBarextends VScrollBar
    {

        public function CustomVScrollBar()
        {
            super();
        }



        override protected function button_buttonDownHandler(event:Event):void {
            var valueTo:Number;
            if (event.target == incrementButton) {
                valueTo = Math.min(value+pageSize, maximum);
            } else if (event.target == decrementButton) {
                valueTo = Math.max(value-pageSize, minimum);
            }
            if (! isNaN(valueTo)) {
                TweenLite.to(this.viewport, .75, {verticalScrollPosition: valueTo});
            }
        }

        override protected function button_buttonUpHandler(event:Event):void {
            // 
            // nothing
        }

    }
}

修改flex spark scrolller以逐页滚动，并缓动

1 个答案: