在移动设备应用程序中使用滚动条

内容

 

对于可滚动组件（例如 Group 容器或 List 控件），指整个组件区域。根据屏幕大小和应用程序布局，可能会仅显示部分内容。

视口

 

当前可见的组件内容区域中的一部分。

拖动

 

用户触摸可滚动区域，然后移动手指以便内容沿手势移动时发生的触摸手势。

速度

 

拖动手势的移动速率和方向。以沿 X 和 Y 轴每毫秒的像素为单位。

抛开

 

用户在拖动手势达到特定速度后抬起手指时的拖动手势，此时可滚动内容仍继续移动。

跳动

 

拖动或抛开手势可以将可滚动组件的视口移至组件内容之外。然后，视口显示空白区域。当您释放手指或抛开速度达到零时，视口将跳跃回其静止点，并且视口有内容填充。移动随着视口接近静止点而减慢，因此能平稳停止。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\SparkMobilePixelScrollerHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

    <s:Scroller width="200" height="200">
        <s:Group> 
            <s:Image width="300" height="400" 
                source="@Embed(source=‘../assets/logo.jpg‘)"/> 
        </s:Group>        
    </s:Scroller>     
</s:View>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\SparkMobilePageScrollHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="Adobe Product List">
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
            
            protected function myList_changeHandler(event:IndexChangeEvent):void {
                navigator.pushView(views.ProductPricelView,myList.selectedItem);
            }
            
        ]]>
    </fx:Script>    
    
    <s:List id="myList" labelField="Product"
        height="200" width="100%" 
        borderVisible="true" 
        scrollSnappingMode="leadingEdge"
        pageScrollingEnabled="true"
        change="myList_changeHandler(event);">
        <s:dataProvider> 
            <s:ArrayCollection> 
                <fx:Object Product="Adobe AIR" Price="11.99"/> 
                <fx:Object Product="Adobe BlazeDS" Price="11.99"/> 
                <fx:Object Product="Adobe ColdFusion" Price="11.99"/> 
                <fx:Object Product="Adobe Flash Player" Price="11.99"/> 
                <fx:Object Product="Adobe Flex" Price="Free"/> 
                <fx:Object Product="Adobe LiveCycleDS" Price="11.99"/> 
                <fx:Object Product="Adobe LiveCycle ES2" Price="11.99"/> 
                <fx:Object Product="Open Source Media Framework"/> 
                <fx:Object Product="Adobe Photoshop" Price="11.99"/> 
                <fx:Object Product="Adobe Illustrator" Price="11.99"/> 
                <fx:Object Product="Adobe Reader" Price="11.99"/> 
                <fx:Object Product="Adobe Acrobat" Price="11.99"/> 
                <fx:Object Product="Adobe InDesign" Price="Free"/> 
                <fx:Object Product="Adobe Connect" Price="11.99"/> 
                <fx:Object Product="Adobe Dreamweaver" Price="11.99"/> 
                <fx:Object Product="Open Framemaker"/> 
            </s:ArrayCollection> 
        </s:dataProvider> 
    </s:List>
</s:View>

• spark.skins.mobile.TextInputSkin 外观，用于不使用 StageText 的 TextInput。

• spark.skins.mobile.TextAreaSkin 外观，用于不使用 StageText 的 TextArea。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileStageTextScrollHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="HomeView">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <!-- Create CSS class selectors that reference the skins
         that do not rely on StageText. -->
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        
        .myTextInputStyle {
            skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
        }
        .myTextAreaStyle {
            skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
        }
    </fx:Style>
    
    <!-- Apply the class selectors to the TextInput and TextArea controls. -->
    <s:Scroller width="100%" height="100%"> 
        <s:VGroup height="250" width="100%"
                  paddingTop="10" paddingLeft="5" paddingRight="10">
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 1: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 2: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 3: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 4: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="TextArea 1: " 
                    fontWeight="bold"/>
                <s:TextArea width="225" height="100"
                    styleName="myTextAreaStyle "/>
            </s:HGroup>
        </s:VGroup>
    </s:Scroller>
</s:View>

1. 使用手指按下 Button 控件。按钮将分派 mouseDown 事件。

2. Flex 将对用户交互的响应延迟预定义的时间段。通过延迟期，可以确保用户正在选择按钮而不是尝试滚动屏幕。

   如果在延迟期间，您移动手指的量多于预定义量，则 Flex 将该手势解释为滚动操作。手指必须移动约 0.08 英寸的距离，该手势才会被解释为滚动。此距离大约相当于 252 DPI 设备上的 20 个像素。

   由于您在延迟期结束前移动了手指，所以 Button 控件不会识别该交互。该按钮不会分派事件或更改其外观。

3. 延迟期结束后，Button 控件将识别用户交互。该按钮将更改其外观，以指示其已被选定。

   使用控件的 touchDelay 属性配置延迟的持续时间。默认值为 100 毫秒。如果将 touchDelay 属性设置为 0，则无延迟，且滚动会立即启动。

4. 延迟期到期且 Flex 已分派鼠标事件后，移动手指的距离可以大于 20 像素。Button 控件将恢复为正常状态，并启动滚动操作。

   在这种情况下，由于延迟期结束，因此按钮会更改其外观。但是，一旦移动手指的距离大于 20 像素，即使延迟期到期后，Flex 也会将手势解释为滚动操作。