【egret】下拉目录

效果如下

主UI界面

1、初始化

	public u_scrollerItem: eui.Scroller;
	public u_mcChapter: eui.Group;
	
	// 装菜单的单个item
	private m_viewList: View[] = [];
	
	protected initView(): void {
		for (let i = 0; i < List.length; i++) {
			let view: View = new View();
			this.m_viewList[i] = (view);
		}
		Dispatch.register(TownBuildingView.EVENT_BUILDING_SELECT, this.setShow, this);
	}
	
	private setShow(missionType): void {
		this.setRowsY(true, missionType);
	}

Scroller用于外层的菜单滚动，mcChapter用于装菜单的单个item；

2、主要代码

	/** 设置菜单信息 */
	private setListData(type: number = -1, initBool: boolean = false): void {
		this.updateList(type, initBool)
	}
	
	/** 
	 *  type: 此刻选择的菜单序号 initBool:是否是打开界面第一次进入
	 */
	private updateList(type:number,initBool = false): void {
		for (let i: number = 0; i < this.m_viewList.length; i++) {
			// 将菜单放入 容器中
			this.u_mcChapter.addChild(this.m_viewList[i]);
			// 如果是最后一个item了，那么开始设置item位置
			if (i == this.m_viewList.length - 1) {
				// view 中带的设置数据的方法
				this.m_viewList[i].setShowData(type, this.setRowsY.bind(this), initBool);
			} else {
				this.m_viewList[i].setShowData(type, null, initBool);
			}
		}
	}

	/** 
	* 重置副本列表位置
	* （用于菜单展开和关闭）
	*/
	private setRowsY(isBool: boolean = false, type: number = -1): void {
		let hMax: number = 0;
		// 用于记录id的view 的起始位置
		let rY: number = 0;
		let mc: View;
		for (let i: number = 0; i < this.m_viewList.length; i++) {
			mc = this.m_viewList[i];
			// view 中设置y值的方法
			mc.setRoy(hMax, isBool);
			// 当传入的菜单序号大于0 并且等于当前view 的id，给ry赋值
			if (type > 0 && type == mc.id) {
				rY = hMax;
			}
			// 前一个的y值加高度是下一个view 的起始位置Y值
			hMax = mc.roy + mc.height;
		}
		rY = this.getRy(rY);
		// 将scroller的显示位置定位到当前展开的view 位置
		TweenLite.to(this.u_scrollerItem.viewport, 0.2, { scrollV: rY });
	}
	
	// 获取展开view的Y值
	private getRy(ry: number): number {
		for (let i: number = 0; i < this.m_viewList.length; i++) {
			let mc: View = this.m_viewList[i];
			// 如果view 的状态是展开，返回ry
			if (this.m_viewList[i].typeShow == 2) {
				return ry;
			}
		}
		return 0;
	}

单个view界面

初始化

	//当前Y值
	private m_roy: number;
	/**1合并  2展开 */
	private m_type: number = 1;

	public u_mcBtnView: eui.Group;
	public u_scrollerItem: eui.Scroller;
	public u_listItem: eui.List;
	
	/**选择菜单 */
	public static EVENT_VIEW_SELECT: string = "EVENT_VIEW_SELECT";
	
	/**合并、展开的高度 */
	public static VIEW_HEIGHT: number[] = [185, 900];

2、主要代码

	/**
	 * 数据更新
	 * @param type 菜单id
	 * initBool 是否初始化
	 */
	public setShowData(type: number = -1, backFunc: Function = null, initBool: boolean = false): void {
		Dispatch.register(View.EVENT_BUILDING_SELECT + "1", this.shouhuiView, this);
		
		// 初始化时所有菜单收起
		if (initBool) {
			this.m_type = 1;
		} else {
			if (type > 0) {
				if (type == this.id) {
					this.m_type = 2;
				} else {
					this.m_type = 1;
				}
			}
		}
		if (backFunc!= null) {
			backFunc.call(this, null, [type]);
		}
		this.setContent();
		this.setDataView();
	}
	
	// 设置 显示内容的 状态
	private setContent(): void {
		if (this.m_type == 1) {
			this.u_mcContent.alpha = 0;
			this.u_mcContent.scaleY = 0;
			this.u_mcContent.touchChildren = false;
			this.u_mcContent.touchEnabled = false;
		}
		else {
			this.u_mcContent.alpha = 1;
			this.u_mcContent.scaleY = 1;
			this.u_mcContent.visible = true;
			this.u_mcContent.touchChildren = true;
			this.u_mcContent.touchEnabled = true;
		}
		this.skin.height = View.VIEW_HEIGHT[this.m_type - 1];
	}

	private setDataView(): void {
		// 用于设置菜单数据
	}
	
	/** 设置Y值*/
	public setRoy(value: number, isMove: boolean = false): void {
		this.m_roy = value;
		if (isMove) {
			TweenLite.to(this, 0.3, { y: value });
		} else {
			this.y = value;
		}
	}
	
	/** 当前的Y值 */
	public get roy(): number {
		return this.m_roy;
	}

	/** 获取当前view的高度 */
	public get height(): number {
		return View.VIEW_HEIGHT[this.m_type - 1];
	}

	/**类型  1合并  2展开 */
	public get typeShow(): number {
		return this.m_type;
	}
	
	/** 用于，点击菜单，将其他菜单收回*/
	private shouhuiView(id: number): void {
		if (this.id !== id) {
			this.m_type = 1;
			this.setContent()
		}
	}