flex按钮控制滚动条
在做图片切换的时候,grid操作的时候,可能有较多的信息,在一个控件中显示不了!那么自然就会有部分显示隐藏了,要想看到更多的信息时,自然会想到滚动条。但是滚动条有时并不完美,比如用户需要的是一屏一屏的去读取内容,或者用户是需要自动翻页,如果这样还让用户去点击滚动条,那用户可能要点着鼠标不放了!对用户体验自然也就差很多。不多说了,直接看代码:
<?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" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.controls.Alert; private static const UNIT_WIDTH:int = 65; /** * 向右移动 */ private function moveRight(xIndex:int):void { tile.horizontalScrollPosition += xIndex*UNIT_WIDTH; } /** * 向左移动 */ private function moveLeft(xIndex:int):void{ tile.horizontalScrollPosition-=xIndex*UNIT_WIDTH; } /** * 上下移动 */ private function moveScoll(xIndex:int, yIndex:int):void { tile2.verticalScrollPosition += yIndex*UNIT_WIDTH; } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:Panel title="Tile Container Example" height="363" width="500" x="30" y="10"> <mx:Button x="40" y="37" label="向左" click="moveLeft(1)"/> <mx:Button x="118" y="37" label="向右" click="moveRight(1)"/> <mx:Button x="256" y="10" label="向上" click="moveScoll(0,-1)"/> <mx:Button x="334" y="10" label="向下" click="moveScoll(0,1)"/> <!--水平滚动--> <mx:Tile id="tile" direction="vertical" width="200" height="52" x="10" y="66" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Button label="1" height="50" width="75"/> <mx:Button label="2" height="50" width="75"/> <mx:Button label="3" height="50" width="75"/> <mx:Button label="4" height="50" width="75"/> <mx:Button label="5" height="50" width="75"/> <mx:Button label="6" height="50" width="75"/> <mx:Button label="11" height="50" width="75"/> <mx:Button label="12" height="50" width="75"/> <mx:Button label="13" height="50" width="75"/> <mx:Button label="14" height="50" width="75"/> <mx:Button label="15" height="50" width="75"/> <mx:Button label="16" height="50" width="75"/> </mx:Tile> <!--垂直滚动--> <mx:Tile x="237" id="tile2" direction="horizontal" y="60" width="77" height="150" verticalScrollPolicy="off"> <mx:Button label="1" height="50" width="75"/> <mx:Button label="2" height="50" width="75"/> <mx:Button label="3" height="50" width="75"/> <mx:Button label="4" height="50" width="75"/> <mx:Button label="5" height="50" width="75"/> <mx:Button label="6" height="50" width="75"/> <mx:Button label="11" height="50" width="75"/> <mx:Button label="12" height="50" width="75"/> <mx:Button label="13" height="50" width="75"/> <mx:Button label="14" height="50" width="75"/> <mx:Button label="15" height="50" width="75"/> <mx:Button label="16" height="50" width="75"/> </mx:Tile> </s:Panel> </s:Application>