修改 flex spark 滚动条以逐页滚动，带缓动答案

【问题标题】：modify flex spark scroller to scroll by page, with easing修改 flex spark 滚动条以逐页滚动，带缓动
【发布时间】：2012-06-04 06:38:39
【问题描述】：

我已经根据 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.

我的预感是我需要为 decrementButton 和 incrementButton 中断 button_buttonUp/DownHandlers 并调用 animatePaging，但我真的不知道该怎么做。尽管编写了大量的 AS3 并成功修改了很多皮肤，但这些火花皮肤对我来说真的很神秘。

期待任何见解！

谢谢！

【问题讨论】：

标签： actionscript-3 apache-flex flex4.5 flex-spark

【解决方案1】：

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

我需要扩展 VScrollBar 类。一旦我这样做了，就很容易覆盖 button_buttonDown/UpHandlers。

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

<my_namespace:CustomVScrollBar for  <s:VScrollBar

这是我的 CustomVScrollBar 的要点。我正在使用 gs.TweenLite，但您可以使用任何补间动画

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
        }

    }
}

【讨论】：