2

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

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

我们的实现相当简单：

<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 列表中实现平滑滚动。如何在火花列表中为可变高度项目实现平滑滚动？

4

2 回答 2

0

Edit:

Here is another way to do this: http://forums.adobe.com/message/3844410#3844410

Ok, so this wont be easy, but it is doable.

1) Create a custom skin for your list

2) In the custom skin, replace the scroller with a custom scroller (MyScroller)

3) Create a new class that extends Scroller, called MyScroller

4) Adobe in their infinite wisdom made skin_mouseWheelHandler private - which they seem to do all over the place, so you would have to override something higher up, maybe attachSkin and detachSkin. Or you could try adding your own skin_mouseWheelHandler with a higher priority in attachSkin and prevent default on it so the default does not get called.

5) Replicate the code in skin_mouseWheelHandler, and modify it to suit your requirements.

于 2013-08-24T04:23:43.163 回答
0

就像@Sunil_D。建议，监听鼠标滚轮事件并手动调整 Horizo​​ntalScrollPosition 是处理此问题的简单方法。为您的组件添加 EventListener

chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);

并使用例如 event.delta 的倍数来增加/减少 Horizo​​ntalScrollPosition

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

找到正确的 SOME_CORRECT_VALUE 可能需要一些试验，但应该不难找到。

于 2013-08-24T11:14:49.687 回答