Question

我们有一个可变高度项列表，我们在Spark List控件中显示。当用户单击并拖动垂直滚动条时，列表会平滑滚动。当使用向上/向下箭头时，它以小而不连续的步骤移动。当使用鼠标滚轮时，列表以非常大的离散步骤滚动，这对用户来说是有问题的。

我们希望为鼠标滚轮启用平滑滚动。我们项目的高度差异很大，当您使用moouse滚动时，由于离散滚动，很容易迷失。

我们的实施非常简单：

<s:List id="chartList" 
        dataProvider="{pm.charts}"
        itemRenderer="charts.ChartItemRenderer"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="on"
        useVirtualLayout="false"
        cachePolicy="auto">
</s:List>

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="false" 
                xmlns:charts="charts.*"
                >
    <fx:Script>
        <![CDATA[
            private var _canvas:BitmapData;

            public function set canvas(value:BitmapData):void
            {
                _canvas = value;
            }

            [Bindable]
            public function get canvas():BitmapData
            {
                return _canvas;
            }

            public function render(x:int,y:int, data:int):void
            {
                _canvas.draw(this);
            }
        ]]>
    </fx:Script>
        <charts:DefaultChartContainer 
            chart="{data}" 
            cachePolicy="on"/>
</s:ItemRenderer>

在Spark List中实现平滑滚动似乎没有开箱即用的方法。如何在可变高度项目的火花列表中实现平滑滚动？

Answer 1

编辑：

这是另一种方法： http://forums.adobe.com/message/3844410#3844410

好的，所以这不容易，但它是可行的。

1）为列表创建自定义外观

2）在自定义皮肤中，用自定义滚动条（MyScroller）替换滚动条

3）创建一个扩展Scroller的新类，名为MyScroller

4）Adobe以他们的无限智慧使skin_mouseWheelHandler私有化 - 他们似乎在整个地方都做了，所以你必须覆盖更高的东西，也许是attachSkin和detachSkin。或者你可以尝试在attachSkin中添加你自己的skin_mouseWheelHandler，它具有更高的优先级，并防止默认值，因此不会调用默认值。

5）复制skin_mouseWheelHandler中的代码，并根据您的要求进行修改。

Answer 2

喜欢@Sunil_D。建议，监听鼠标滚轮事件并手动调整HorizontalScrollPosition是一种处理此问题的简单方法。为组件添加EventListener

chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);

并使用例如event.delta的倍数

增加/减少horizontalScrollPosition

protected function chartList_mouseWheelHandler(event:MouseEvent):void
{           
    chartList.verticalScrollPosition -= (event.delta * SOME_CORRECT_VALUE);
}

找到合适的SOME_CORRECT_VALUE可能需要进行一些实验，但不应该很难找到。

使用鼠标滚轮平滑滚动具有可变高度项的Spark列表

2 个答案: