旋钮代替滚动条

按钮代替滚动条
我想自定义一个组件，此组件继承mx.containers.Tile
为了效果，希望用向左，向右两个按钮来代替容器里的滚动条，每次点击时，Tile容器里的东西向左或向右滚动，不知道这个AS怎么写
对于问题有什么不明白的请留言
[解决办法]
给你个示例，如果想做成组件，自己封装下就可以。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Tile layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
private static const UNIT_WIDTH:int = 65;

private function moveScoll(xIndex:int, yIndex:int):void
{
//tile.horizontalScrollPosition += xIndex*UNIT_WIDTH; 
tile.verticalScrollPosition += yIndex*UNIT_WIDTH; 
}
]]>
</mx:Script>

    <mx:Panel title="Tile Container Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:HBox>
<mx:Button label="向上" click="moveScoll(0,-1)" />
<mx:Button label="向下" click="moveScoll(0,1)" />
</mx:HBox>

        <mx:Tile id="tile" direction="horizontal" borderStyle="inset" width="200" height="150"
                horizontalGap="10" verticalGap="15" 
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

            <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:Panel>
</mx:Application>

[解决办法]
LZ网名是不是"迷失浪迹"呀，哈哈~我以群里已经回答了你的这个问题了，我是Ready Lau
所以也给点分给我吧，哈
------解决方案--------------------

借用楼上代码，帮你实现了左右，上下

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fc="http://www.adobe.com/2006/fc"
layout="absolute"  viewSourceURL="srcview/index.html">
<mx:Script>
        <![CDATA[
        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; 
            }

        ]]>
    </mx:Script>
    
    <mx:Panel title="Tile Container Example" height="309" width="482" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" layout="absolute" x="30" y="10">
        <mx:HBox x="10" y="10">
            <mx:Button label="向左" click="moveLeft(1)" />
            <mx:Button label="向右" click="moveRight(1)" />
        </mx:HBox>
        <mx:HBox x="252" y="12" height="29">
            <mx:Button label="向上" click="moveScoll(0,-1)" />
            <mx:Button label="向下" click="moveScoll(0,1)" />
        </mx:HBox>
        
  <!--水平滚动-->
        <mx:Tile id="tile" direction="vertical" borderStyle="inset" width="200" height="150"
                horizontalGap="10" verticalGap="15" 
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" x="10" y="66">
            <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="252" id="tile2" direction="horizontal" y="66" width="200" height="150">
        <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:Panel>
</mx:Application>

查看更多 下一篇