Getting scrolling right in a mobile horizontal list

With the release of Flex 4.5, you can now use Flex to build mobile applications. One of the features added to the Spark List to support mobile was the addition of bounce/pull effects at the beginning and end of a list. You can see this behavior by pulling down on the top of a list or up on the bottom of the list. When you do this, you will get a ‘bounce’ effect from the List’s boundaries.

In the majority of applications, you will choose to use a vertical list. However, occasionally, you may want to use a horizontal list. If you do this, you will get some strange default behavior with regards to scrolling in your horizontal list. In the horizontal direction, scrolling will work as expected. However, in the vertical direction, where there should be no scrolling, you will actual be able to pull up and pull down on the top and bottom boundaries. This is because the bounce and pull effects are actually still on in the vertical direction. To get the expected scrolling behavior for a horizontal list, you will want to turn verticalScrollPolicy=”off” on the List.

<s:List id=”colorList” dataProvider=”{colorsArray}” width=”100%” itemRenderer=”ColorRenderer”
y=”40″ selectedIndex=”0″ verticalScrollPolicy=”off”>
<s:HorizontalLayout  />

For more information on this, you can check out bug: SDK-28980

Here is an example mobile project that uses a horizontal list of colors to select a frame for an image.

Source: ColorFun.fxp

2 responses

  1. Thanks ! Very Helpful

  2. My god. Thank you for posting was driving my crazy

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: