Flex中如何设定HorizontalList控件横向(horizontal)滚动位置的例子

By Minidxer | April 4, 2008

接下来的例子演示了如何通过设置horizontalScrollPosition属性，来设定Flex中HorizontalList控件横向(horizontal)滚动位置。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.SliderEvent;
  10.  
  11.             private function prev():void {
  12.                 var pos:int = hList.horizontalScrollPosition-1;
  13.                 var min:int = 0;
  14.                 var value:int = Math.max(min, pos);
  15.                 hList.horizontalScrollPosition = value;
  16.             }
  17.  
  18.             private function next():void {
  19.                 var pos:int = hList.horizontalScrollPosition+1;
  20.                 var max:int = hList.maxHorizontalScrollPosition;
  21.                 var value:int = Math.min(pos, max);
  22.                 hList.horizontalScrollPosition = value;
  23.             }
  24.  
  25.             private function slider_change(evt:SliderEvent):void {
  26.                 hList.horizontalScrollPosition = evt.value;
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:Array id="arr">
  32.         <mx:Object lbl="Illustrator" src="ai_appicon-tn.gif" />
  33.         <mx:Object lbl="Adobe AIR" src="air_appicon-tn.gif" />
  34.         <mx:Object lbl="ColdFusion" src="cf_appicon-tn.gif" />
  35.         <mx:Object lbl="Dreamweaver" src="dw_appicon-tn.gif" />
  36.         <mx:Object lbl="Flash" src="fl_appicon-tn.gif" />
  37.         <mx:Object lbl="Flash Player" src="fl_player_appicon-tn.gif" />
  38.         <mx:Object lbl="Fireworks" src="fw_appicon-tn.gif" />
  39.         <mx:Object lbl="Flex" src="fx_appicon-tn.gif" />
  40.         <mx:Object lbl="Lightroom" src="lr_appicon-tn.gif" />
  41.         <mx:Object lbl="Photoshop" src="ps_appicon-tn.gif" />
  42.     </mx:Array>
  43.  
  44.     <mx:Panel styleName="opaquePanel">
  45.         <mx:HorizontalList id="hList"
  46.                 dataProvider="{arr}"
  47.                 itemRenderer="HorizontalListItemRenderer"
  48.                 verticalScrollPolicy="off"
  49.                 horizontalScrollPolicy="off"
  50.                 columnWidth="100"
  51.                 columnCount="4"
  52.                 rowHeight="100"
  53.                 rowCount="1"
  54.                 borderSkin="{null}" />
  55.         <mx:ControlBar>
  56.             <mx:Button label="Previous" click="prev();" />
  57.             <mx:HSlider id="slider"
  58.                     minimum="0"
  59.                     maximum="{hList.maxHorizontalScrollPosition}"
  60.                     value="{hList.horizontalScrollPosition}"
  61.                     liveDragging="true"
  62.                     snapInterval="1"
  63.                     tickInterval="1"
  64.                     showDataTip="false"
  65.                     width="100%"
  66.                     change="slider_change(event);" />
  67.             <mx:Button label="Next" click="next();" />
  68.         </mx:ControlBar>
  69.     </mx:Panel>
  70.  
  71. </mx:Application>
Download: HorizontalListItemRenderer.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         styleName="plain">
  4.  
  5.     <mx:Image source="{data.src}"
  6.             horizontalCenter="0"
  7.             verticalCenter="0" />
  8.     <mx:Label text="{data.lbl}"
  9.             fontWeight="bold"
  10.             horizontalCenter="0"
  11.             bottom="0" />
  12.  
  13. </mx:Canvas>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads