<?xml version="1.0" encoding="utf-8"?> <mx:ProgressBar xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="10" minimum="0" maximum="100" mode="manual" trackHeight="10" verticalGap="0" creationComplete="initComp();"> <mx:Script> <![CDATA[ private var myTimer:Timer;// 定时器 public var delay:Number = 50;// 间隔时间 public var repetCount:Number = 0;// 重复次数 public var increaseNum:Number = 1;// 进度增长值 private var proc:uint = 0;// 进度基数 public var labelTip:String = "正在处理...请等待...";//显示内容需要时在外部赋值 private const PERCENT:Number = 100;// 进度百分比 public var isDispalyLabel:Boolean = true;// 是否显示进度信息 /***************************************************************** * 注意:当调整进度条显示的宽度时,得根据显示的宽度,适当考虑 * * 进度增长值和间隔时间;这样才能更感觉时平滑过度 * * 若需改为ProgressEvent.PROGRESS 监听,需先关闭定时器触发 closeTimer()* * 改为onProgress()函数响应 * *****************************************************************/ private function initComp():void { this.label = ""; initTimer(); startTimer(); } /** * 初始化Timer */ public function initTimer():void { myTimer = new Timer( delay, repetCount ); myTimer.addEventListener( TimerEvent.TIMER, onTimer ); } /** * 响应Timer事件 计算进度 */ private function onTimer( event:TimerEvent ):void { proc += increaseNum; this.setProgress( proc %= PERCENT, PERCENT ); if( isDispalyLabel ) { this.label = labelTip; } else { this.label = ""; } } /** * 关闭定时器Timer */ public function startTimer():void { proc = 0; myTimer.start(); } /** * 关闭定时器Timer */ public function closeTimer():void { myTimer.stop(); } /** * 响应进度事件处理 */ public function onProgress(e: ProgressEvent): void{ /* lbProgress.text = " 已上传 " + e.bytesLoaded + " 字节,共 " + e.bytesTotal + " 字节"; */ var proc: uint = e.bytesLoaded / e.bytesTotal * 100; this.setProgress(proc, 100); this.visible = true; if( isDispalyLabel ) { this.label= "当前进度: " + " " + proc + "%"; } else { this.label = ""; } } ]]> </mx:Script> </mx:ProgressBar>
ProgressBar 进度条组件封装
最新推荐文章于 2022-09-21 00:41:21 发布