flex4 list 实现分页

<?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"

               xmlns:local="*" creationComplete="init()"

               height="100%" width="100%">

   

    <fx:Script>

        <![CDATA[

            import mx.controls.Alert;

            [Bindable] public var totalPages:Number;

            [Bindable] public var currentPage:Number = 1;

            

            [Embed(source='assets/backpack.jpg')]

            [Bindable]

            public var backpackCls:Class;

           

            [Embed(source='assets/boots.jpg')]

            [Bindable]

            public var bootsCls:Class;

           

            [Embed(source='assets/compass.jpg')]

            [Bindable]

            public var compassCls:Class;

           

            [Embed(source='assets/goggles.jpg')]

            [Bindable]

            public var gogglesCls:Class;

           

            [Embed(source='assets/helmet.jpg')]

            [Bindable]

            public var helmetCls:Class;

           

            public function prevPageHandler():void {

                if(currentPage == 1) return ;

                currentPage--;

                //上一页

                list.scroller.verticalScrollBar.changeValueByPage(false);

            }

           

            public function nextPageHandler():void {

                if(currentPage == totalPages) return;

                currentPage++;

                //下一页

                list.scroller.verticalScrollBar.changeValueByPage(true);

            }

           

            //设置list控件的滚动控件的样式

            public function init():void {

                //关掉滚动控件的垂直和水平滚动条

                list.scroller.setStyle('horizontalScrollPolicy', 'off');

                list.scroller.setStyle('verticalScrollPolicy', 'off');

                //设置滚动控件的垂直滚动条的滚动样式

                list.scroller.verticalScrollBar.setStyle('smoothScrolling', true);//设置为平滑滚动

                list.scroller.verticalScrollBar.setStyle('repeatInterval', 500);//设置滚动到指定点的经过的时间

                totalPages = Math.ceil(list.scroller.viewport.contentHeight/list.scroller.verticalScrollBar.pageSize);

            }

           

        ]]>

    </fx:Script>

    <s:VGroup x="10" y="5" height="100%" width="100%">

        <s:Label text="Page {currentPage} of {totalPages}"/>

        <s:HGroup>

            <s:VGroup>

                <s:Button id="prev" label="Prev" click="prevPageHandler()"/>

                <s:Button id="next" label="Next" click="nextPageHandler()"/>

            </s:VGroup>

            <s:List id="list" width="400" height="362">

                <s:dataProvider>

                    <s:ArrayCollection>

                        <fx:Object name="Backpack" photo="{backpackCls}"/>

                        <fx:Object name="Boots" photo="{bootsCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Helmet" photo="{helmetCls}"/>

                        <fx:Object name="Backpack" photo="{backpackCls}"/>

                        <fx:Object name="Boots" photo="{bootsCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Backpack" photo="{backpackCls}"/>

                        <fx:Object name="Boots" photo="{bootsCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Helmet" photo="{helmetCls}"/>

                        <fx:Object name="Backpack" photo="{backpackCls}"/>

                        <fx:Object name="Boots" photo="{bootsCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Helmet" photo="{helmetCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Helmet" photo="{helmetCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Helmet" photo="{helmetCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                        <fx:Object name="Goggles" photo="{gogglesCls}"/>

                        <fx:Object name="Backpack" photo="{backpackCls}"/>

                        <fx:Object name="Boots" photo="{bootsCls}"/>

                        <fx:Object name="Compass" photo="{compassCls}"/>

                    </s:ArrayCollection>

                </s:dataProvider>

                <s:layout>

                    <s:TileLayout horizontalGap="0" verticalGap="0" requestedColumnCount="3"

                                  columnWidth="120" rowHeight="120"/>

                </s:layout>

                <s:itemRenderer>

                    <fx:Component>

                        <local:PictureItemRenderer />

                    </fx:Component>

                </s:itemRenderer>

            </s:List>

        </s:HGroup>

 

    </s:VGroup>

</s:Application>

 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/flexrhythm/archive/2010/06/26/5696128.aspx