整整一个月没更新博客了,时间过的好快。。前几天本懒人为了实现一个分页功能,想在网上找个现成的AS3的分页类,找了半天没找到,只好自己写了个分页类,正好发上来。
这个类只有简单的向前翻页和向后翻页,以及显示当前页码和总页数的功能(类似于QQ农场的好友列表下面的翻页),翻到最前页或最后页继续翻,会循环到最后页或最前页,也算是看了QQ农场这个功能之后在用户体验方面的小改进,在类里面读到UI资源用到的ResourcesManager将在下篇日志中发出来。
简陋的截图:

package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFormat; import common.ResourcesManager; // 数组分页类 // by Bindiry public class Pager { // 每个页面显示记录数 private var _pageSize:int = 0; // 总记录数 private var _recordCount:int = 0; // 当前页面 private var _currentPage:int = 1; // 页面总数 private var _pageCount:int = 0; // 页码信息 private var _pageString:TextField; // 页面信息及控制容器 private var _pagePanel:Sprite; // 开始记录数 private var _startRecord:int = 0; // 结束记录数 private var _endRecord:int = 0; // 页面改变事件相关 private var _eventDispatcher:EventDispatcher; public static const PAGE_CHANGED:String = "changed"; public function Pager() { // 读取页码资源(箭头) var clsPageArrow:Class = ResourcesManager.getResource(ResourcesManager.UI)["PagerArrow"] as Class; var pageArrowLeft:MovieClip = new clsPageArrow(); pageArrowLeft.buttonMode = true; // 设置向前翻页单击事件 pageArrowLeft.addEventListener(MouseEvent.CLICK, onLeftClickHandler); var pageArrowRight:MovieClip = new clsPageArrow(); pageArrowRight.buttonMode = true; // 设置向后翻页单击事件 pageArrowRight.addEventListener(MouseEvent.CLICK, onRightClickHandler); pageArrowRight.scaleX = -1; // 将按钮及页码信息加入容器里 _pagePanel = new Sprite(); _pagePanel.addChild(pageArrowLeft); _pageString = new TextField(); _pageString.x = 20; _pagePanel.addChild(_pageString); pageArrowRight.x = 60; _pagePanel.addChild(pageArrowRight); // 自定义事件 _eventDispatcher = new EventDispatcher(); } // 向前翻页单击事件处理 private function onLeftClickHandler(e:MouseEvent):void { if (_currentPage > 1) { _currentPage -= 1; if (_currentPage == 1) _startRecord = 1; else _startRecord = (_currentPage - 1) * _pageSize + 1; _endRecord = _startRecord + _pageSize; } else { _currentPage = _pageCount; _startRecord = (_currentPage - 1) * _pageSize + 1; // 取余 var _residueRecord:int = (_recordCount % _pageSize == 0) ? _pageSize : _recordCount % _pageSize; _endRecord = _startRecord + _residueRecord; } updatePageString(); var event:Event = new Event(PAGE_CHANGED); _eventDispatcher.dispatchEvent(event); } // 向后翻页单击事件处理 private function onRightClickHandler(e:MouseEvent):void { if (_currentPage < _pageCount) { _currentPage += 1; _startRecord = (_currentPage - 1) * _pageSize + 1; if (_currentPage == _pageCount) { // 取余 var _residueRecord:int = (_recordCount % _pageSize == 0) ? _pageSize : _recordCount % _pageSize; _endRecord = _startRecord + _residueRecord; } else { _endRecord = _startRecord + _pageSize; } } else { _currentPage = 1; _startRecord = 1; _endRecord = _startRecord + _pageSize; } updatePageString(); var event:Event = new Event(PAGE_CHANGED); _eventDispatcher.dispatchEvent(event); } // 添加事件 public function addEventListener(type:String, fun:Function):void { _eventDispatcher.addEventListener(type, fun); } // 设置每页记录数 public function set pageSize(pagesize:int):void { _pageSize = pagesize; } // 设置当前页码 public function set currentPage(currentPage:int):void { _currentPage = currentPage; } // 设置记录总数 public function set recordCount(recordCount:int):void { _recordCount = recordCount; _pageCount = Math.ceil(_recordCount / _pageSize); updatePageString(); } // 更新页码信息 public function updatePageString():void { _pageString.text = _currentPage + "/" + _pageCount; } // 获取页码及控制按钮面板 public function get pagePanel():Sprite { return _pagePanel; } // 获取起始记录数 public function get startRecord():int { return _startRecord; } // 获取结束记录数 public function get endRecord():int { return _endRecord; } } } |
使用方法:(大概代码,有点麻烦,但大概思路是讲明白了,因为是从项目中提取的,所以本懒人未测试-_-)
package { import common.Pager; // 好友面板 public class Test { var arr:Array = []; public function FriendsPanel(owner:DisplayObjectContainer) { for (i = 0; i < 14; i++) { arr.push({id:100, name:"bindiry"+i.toString()}); } var pager:Pager = new Pager(); pager.pageSize = 5; pager.recordCount = arr.length; pager.addEventListener(Pager.PAGE_CHANGED, onPagerChangedHandler); // 将分页显示控制Panel添加到场景中 pager.pagePanel.y = 260; pager.pagePanel.x = 150; addChild(pager.pagePanel); } // 页面更改事件中做相应处理 private function onPagerChangedHandler(e:Event):void { //清除场景 cleanStage(); //往场景里加入数组项 var itemHeighti:int = 0; var itemHeight:int = 200 / _PageSize; var currentHeight:int = 0; trace("startRecord", startRecord); trace("endRecord", endRecord); for (var i:int = startRecord - 1; i < endRecord - 1; i++) { currentHeight = (itemHeighti > 0) ? itemHeight * itemHeighti : 0; addToListPanel(arr[i].name, currentHeight, itemHeighti); itemHeighti += 1; } } private function addToListPanel(text:String, height:int, i:int):void { // 这里的_ListPanelItemBG是我在flash里做的一个MovieClip,然后在上面加了一个名称为itemText的动态文本 var _ListPanelItemBG:MovieClip = new clsListItemBG(); _ListPanelItemBG.y = height; _ListPanelItemBG.itemText.text = text; addChild(_ListPanelItemBG); } private function cleanStage():void { while (this.numChildren > 0) { this.removeChildAt(0); } } } } |
如果有朋友发现程序的不足或有更好的建议,还望在评论中提出。