egret 滚动向下拉刷新数据

在一个egret项目开发中有个报表做分页的需求，因为是手机版的原因所以想过同滚动向下拉来实现局部刷新数据。

由于官网还没有相关的资料所以参照了Scroller的文档和egret的帖子写了类似的例子。实现的思路还是比较简单的主要根据CHANGE事件检查滚动区是否超过设置的像素，再通过CHANGE_END事件检测到停止滚动时给请求添加数据。由于没有请求暂时性用

let dataArrylen = (this.moveListDate.length>0)?this.moveListDate.length:10;

代替动态获取数据；

主要ts

class scrollMove extends eui.Component{
	private moveScroll:eui.Scroller;
	private moveGroup:eui.Group;
	private moveListDate:any  = [];
	private needUp: boolean = false;
	private needDown: boolean = false;
	public constructor() {
		super();
		this.skinName = "resource/demoSkins/scrollSK.exml";
		this.addEventListener(egret.Event.COMPLETE, this.addToStage, this);
	}

	protected createChilden(){
		super.createChildren();
	}
	private addData(dataLists):void{
		this.moveGroup.removeChildren();
		for(let i = 0;i<dataLists.length;i++){
			this.moveGroup.addChild(dataLists[i]);
		}
		this.moveScroll.addEventListener(eui.UIEvent.CHANGE, this.moveHandler, this);
		this.moveScroll.addEventListener(eui.UIEvent.CHANGE_END, this.outHandler, this);
	}
	private addToStage():void{
		let dataArrylen = (this.moveListDate.length>0)?this.moveListDate.length:10;
		for(let i = 0;i<dataArrylen;i++){
			let dataList:eui.Group = new eui.Group();
			dataList.width = 600;
			dataList.height = 86;
			dataList.x = 0;
			dataList.y = (i*110);

			//list背景
			let itemImage = new eui.Image();
			itemImage.source = "sss_png";
			itemImage.x = 0;
			itemImage.y = 0;
			itemImage.width = 600;
			itemImage.height = 86;
			itemImage.fillMode = egret.BitmapFillMode.SCALE;//图片填充方式
			itemImage.touchEnabled = true;
			dataList.addChild(itemImage);
			this.moveListDate.push(dataList);
		}
		this.addData(this.moveListDate);
	}
	private moveHandler(evt: eui.UIEvent): void {
		//检测是否超过滚动底部
		// console.log(this.moveScroll.viewport.scrollV);
		// console.log(this.moveScroll.viewport.contentHeight - this.moveScroll.viewport.height);
		console.log(this.moveScroll.viewport.scrollV > this.moveScroll.viewport.contentHeight - this.moveScroll.viewport.height);
		if(this.moveScroll.viewport.scrollV > (this.moveScroll.viewport.contentHeight - this.moveScroll.viewport.height)+40){
			this.needUp = true;
		}
    }
	private outHandler(evt:eui.UIEvent):void{
		//停止滚动时判断needUp是否为true
		console.log(this.needUp);
		if(this.needUp){
			this.needUp = false;
			this.addToStage();
		}
	}
}

exml文件：

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="scrollSK" width="630" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
	<e:Scroller id="moveScroll" width="600" height="1000" x="15" y="20">
		<e:Group id="moveGroup" width="600" height="100"/>
	</e:Scroller>
</e:Skin>