flex4 list 实现分页

本文主要是介绍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}"/>