分页组件（引用Super Flex文章）

最新推荐文章于 2023-05-26 08:00:00 发布

原创最新推荐文章于 2023-05-26 08:00:00 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex

本文介绍了一种使用Flex中的LinkButton和Repeater组件来构建分页功能的方法。该分页组件能够显示当前页面数，并允许用户通过点击按钮切换不同的页面。此外，还提供了一些样式设置以增强组件的美观。

分页组件

这套组件主要是用到了LinkButton和Repeater。

<!-- page -->

<mx:HBox id="paginationbox" width="100%" height="24"

		 verticalAlign="middle" horizontalGap="0"

		 visible="false">

	<mx:Label text="PAGES: "/>

	<mx:Spacer width="3"/>

	<mx:LinkButton label="&lt;&lt;"

				   styleName="pageLinkBtn"

				   enabled="{_curr_page_index!=0}"

				   click="showImagesInList()"/>

	<mx:LinkButton label="&lt;"

				   styleName="pageLinkBtn"

				   enabled="{_curr_page_index &gt; 0}"

				   click="showImagesInList(_curr_page_index-1)"/>

	<mx:Repeater id="prepeater"

				 dataProvider="{_pages}"

				 count="7"

				 startingIndex="{(_curr_page_index-3 &lt; 0)?0:(_curr_page_index-3)}">

		<mx:LinkButton label="{(prepeater.currentIndex+1).toString()}"

					   enabled="{int(prepeater.currentIndex) != _curr_page_index}"

					   styleName="pageLinkBtn"

					   click="showImagesInList(event.currentTarget.repeaterIndex)"/>

	</mx:Repeater>

	<mx:LinkButton label="&gt;"

				   enabled="{_curr_page_index &lt; _pages.length-1}"

				   click="showImagesInList(_curr_page_index+1)"

				   styleName="pageLinkBtn"/>

	<mx:LinkButton label="&gt;&gt;"

				   enabled="{_curr_page_index != _pages.length-1}"

				   click="showImagesInList(_pages.length-1)"

				   styleName="pageLinkBtn"/>

</mx:HBox>

style比较简单

.pageLinkBtn

{

	paddingLeft:0;

	paddingRight:0;

	paddingTop:0;

	paddingBottom:0;

}