air mobile andriod ios 分页加载控件

标签：air   android   控件   flex builder   分页   

近来研究用flex 写android 、ios应用，遇到了一个分页加载的问题，我们用的是flex sdk 12,air 15 没有找到类似android ListView分页组件，所以就和同事自己写了个，效果还是可以的，向上拖动刷新，向下拖动加载。如果有感兴趣的朋友可以拿走，如果你有更好的通知我一声，代码就直接帖出来吧。

<?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"
			   applicationComplete="init()">
	
	<fx:Declarations>
		<s:ArrayCollection id="_ac"/>
		<s:Fade id="_fadeIn" alphaFrom="0" alphaTo="1" duration="500"/>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.events.PropertyChangeEvent;
			
			private static const PADDING:uint = 15;
			
			private function init():void {
				updateList();
				_list.dataGroup.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handleScroll);
			}
			
			private function handleScroll(event:PropertyChangeEvent):void {
				if (_busy.visible || _busy_x.visible || 
					event.source != event.target || 
					event.property != 'verticalScrollPosition') {
					return;
				}
				//下拉 加载 
				if (event.newValue < -3 * PADDING && 
					event.oldValue >= -3 * PADDING) {
					_hintDown.visible = true;
					_hintUp.visible = false;
					_fadeIn.play([_hintDown]);
				} else if (event.newValue < -6 * PADDING && 
					event.oldValue >= -6 * PADDING) {
					_hintDown.visible = false;
					_hintUp.visible = true;
					_fadeIn.play([_hintUp]);
				} else if (event.newValue >= -6 * PADDING && 
					event.oldValue < -6 * PADDING) {
					_hintDown.visible = true;
					_hintUp.visible = false;
					_fadeIn.play([_hintDown]);
				} else if (event.newValue >= -3 * PADDING && 
					event.oldValue < -3 * PADDING) {
					_hintDown.visible = false;
					_hintUp.visible = false;
				}
				
				
				//上拉刷新 加载 
				if (event.newValue < 3 * PADDING && 
					event.oldValue >= 3 * PADDING) {
					_hintDown_up.visible = false;
					_hintUp_up.visible = false;
				} 
				else if (event.newValue < 6 * PADDING && 
					event.oldValue >= 6 * PADDING) {
					_hintDown_up.visible = false;
					_hintUp_up.visible = false;
				}
				else if (event.newValue >= 6 * PADDING && 
					event.oldValue < 6 * PADDING) {
					_hintDown_up.visible = false;
					_hintUp_up.visible = true;
					_fadeIn.play([_hintUp_up]);
				}
				else if (event.newValue >= 3 * PADDING && 
					event.oldValue < 3 * PADDING) {
					_hintDown_up.visible = true;
					_hintUp_up.visible = false;
					_fadeIn.play([_hintDown_up]);
				}
			}
			
			private function startLoading(event:MouseEvent):void {
				
				//下拉 加载方法
				if (_hintUp.visible) {
					_busy.includeInLayout = _busy.visible = true;
					if(_hintDown.visible)
						_busy_x.includeInLayout = _busy_x.visible = true;
					setTimeout(updateList, 1000);
				}
				_hintDown.visible = false;
				_hintUp.visible = false;
				
				
				//上拉 加载方法
				if (_hintUp_up.visible) {
					_busy_x.includeInLayout = _busy_x.visible = true;
					if(_hintDown_up.visible)
						_busy_x.includeInLayout = _busy_x.visible = true;
					setTimeout(updateList, 1000);
				}
				_hintDown_up.visible = false;
				_hintUp_up.visible = false;
			}
			
			private function updateList():void {
				_ac.source = new Array();
				for (var i:int = 0; i < 10; i++) {
					_ac.source.push(Math.random());
				}
				_ac.refresh();
				_busy.includeInLayout = _busy.visible = false;
				_busy_x.includeInLayout = _busy_x.visible = false;
			}
			
		]]>
	</fx:Script>
	
	<s:VGroup width="100%" >
		<s:HGroup id="_busy" visible="false" width="100%" horizontalAlign="center"
				  includeInLayout="false" verticalAlign="middle">
			<s:BusyIndicator height="30"/>
			<s:Label text="加载数据..." fontSize="20"/>
		</s:HGroup>
		
		<s:List id="_list" width="100%" contentBackgroundColor="#FFFFFF" dataProvider="{_ac}"
				mouseUp="startLoading(event)"/>
		<s:HGroup id="_busy_x" visible="false" width="100%" horizontalAlign="center"
				  includeInLayout="false" verticalAlign="middle">
			<s:BusyIndicator height="30"/>
			<s:Label text="加载数据..." fontSize="20"/>
		</s:HGroup>
	</s:VGroup>
	
	<s:Label id="_hintDown" visible="false" width="100%" paddingTop="{PADDING}" text="↓ 下拉刷新 ↓" fontSize="20"
			 textAlign="center"/>
	 
	<s:Label id="_hintUp" visible="false" width="100%" paddingTop="{PADDING}" text="↑ 松手刷新 ↑" fontSize="20"
			 textAlign="center"/>
	
	<s:Label id="_hintDown_up" visible="false" bottom="0" width="100%" text="↑ 上拉刷新 ↑" fontSize="20"
			 textAlign="center"/>
	
	<s:Label id="_hintUp_up" visible="false" bottom="0" width="100%" text="↓ 松手刷新 ↓" fontSize="20"
			 textAlign="center"/>
	
</s:Application>

air mobile andriod ios 分页加载控件

标签：air   android   控件   flex builder   分页   

原文地址：http://blog.csdn.net/dongdong_java/article/details/41245799