近来研究用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>