在使用鼠标单击滚动后使用鼠标滚轮时，Tilelayout 超大的 Spark 列表中的滚动间隔答案

【问题标题】：scrolling interval in a Spark List with Tilelayout oversized while using mouse wheel after scrolling with mouseclick在使用鼠标单击滚动后使用鼠标滚轮时，Tilelayout 超大的 Spark 列表中的滚动间隔
【发布时间】：2011-04-04 18:57:36
【问题描述】：

我有一个带有项目渲染器和磁贴布局的 spark 列表。
如果我通过在滚动条上单击鼠标进行滚动，然后尝试使用鼠标滚轮滚动，则会出现问题：

滚动的间隔过大，而不是向下（或向上）滚动一个项目，列表向下（或向上）滚动 4 个项目。

<s:List
    dataProvider="{myDataProvider}"
    itemRenderer="MyRenderer"
    left="11" right="11"
    bottom="3" top="10"
    useVirtualLayout="false"
    >
        <s:layout>
            <s:TileLayout
                columnAlign="justifyUsingWidth"
                rowAlign="justifyUsingGap"
                orientation="rows"
                rowHeight="180"
                columnWidth="220"
                clipAndEnableScrolling="true"
                />
        </s:layout>
    </s:List>

rowHeight = 180 和 columnWidth = 220 是我的渲染器的尺寸。

任何提示有什么问题或我可以如何解决这个问题？

更新： 这是一个小例子：

主要应用：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="init(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable] public var items:ArrayCollection;

            protected function init(event:FlexEvent):void{
                items = new ArrayCollection();
                for(var i:int = 0; i<200; i++){
                    var obj:Object = new Object();
                    obj.name = "Item "+i;
                    items.addItem(obj);
                }
            }

                    protected function list1_mouseWheelHandler(event:MouseEvent):void{
                trace("delta ="+event.delta);
            }
        ]]>
    </fx:Script>
    <s:Group width="50%"
             height="50%">
        <s:List
            dataProvider="{items}"
            left="5" right="5"
            top="5" bottom="5"
            itemRenderer="MyRenderer"
            allowMultipleSelection="false"
            useVirtualLayout="false"
            mouseWheel="list1_mouseWheelHandler(event)"
            >
            <s:layout>
                <s:TileLayout
                    columnAlign="justifyUsingWidth"
                    rowAlign="justifyUsingGap"
                    orientation="rows"
                    rowHeight="180"
                    columnWidth="220"
                    clipAndEnableScrolling="true"
                    />
            </s:layout>
        </s:List>
    </s:Group>

还有渲染器：

<?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" 
                xmlns:spareparts="de.rotex.spareparts.*"
                width="220" height="180">

    <s:BorderContainer borderColor="#FFF9DE" >      
        <s:Label horizontalCenter="0" verticalCenter="0"
                 text="{data.name}" />
    </s:BorderContainer>
</s:ItemRenderer>

如果您现在尝试滚动，您会注意到（只需滚动一次）您会在顶部看到第 6 项和第 7 项（将 windows 中的 line-scroll 属性设置为 3，这样就可以了）。但是，如果您现在单击滚动条并再次滚动（从顶部），您将看到 Item 12 和 13 在顶部。不是之前的第 6 条和第 7 条……

【问题讨论】：

这在多个操作系统/浏览器之间是否一致？您能否提供一个完整的可运行示例，其中包含演示问题的数据？
我提供了一个例子（见问题）。这个问题在 IE 中不存在，但在 Firefox 中。我无法在 Windows XP 以外的其他操作系统上对其进行测试。
我无法在FF中重现这个，但是滚动完成的地方是VScrollBar->mouseWheelHandler，所以你可能需要在那里检查。

标签： list actionscript-3 apache-flex scroll flex-spark

【解决方案1】：

您可以通过继承 VScrollBar 并覆盖 mouseWheelHandler 方法来控制鼠标滚轮的滚动量。此论坛帖子中的帖子附有示例代码：http://forums.adobe.com/message/2783736

【讨论】：