当前位置：首页 > news >正文

【cocos creator】下拉框

news 2024/11/27 22:48:48

https://download.csdn.net/download/K86338236/90038176

请添加图片描述


const { ccclass, property } = cc._decorator;type DropDownOptionData = {optionString?: string,optionSf?: cc.SpriteFrame
}
type DropDownItemData = {label: cc.Label,sprite: cc.Sprite,toggle: cc.Toggle
}@ccclass()
export default class DropDown extends cc.Component {@property(cc.Node)private touchNode: cc.Node = undefined;@property(cc.Node)private arrow: cc.Node = undefined;@property(cc.ScrollView)private template: cc.ScrollView = undefined;@property(cc.Node)private optionItem: cc.Node = undefined;@property(cc.Node)private spriteCaption: cc.Sprite = undefined;@property(cc.Label)private labelCaption: cc.Label = undefined;private optionDatas: DropDownOptionData[] = [];chooseIndex = -1;showTemplate = falseprotected start(): void {if (this.touchNode) {this.touchNode.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);//@ts-ignorethis.touchNode._touchListener.setSwallowTouches(false);//取消触摸节点的穿透事件}this.reset()let data = [{ optionString: "11" }, { optionString: "22" }]this.init(data)}reset() {this.showTemplate = falsethis.spriteCaption.spriteFrame = null;this.labelCaption.string = "";this.chooseIndex = -1this.template.node.active = this.showTemplate;let content = this.template.contentcontent.children.forEach(element => {element.active = false});this.optionDatas = [];this.upDateTemplate()}init(data: DropDownOptionData[]) {this.optionDatas = datathis.upDateTemplate()}chooseItem(event, data) {let number = Number(data)this.chooseIndex = isNaN(number) ? -1 : numberthis.updateChoose()this.hideTample()}upDateTemplate() {let content = this.template.contentlet item = this.optionItemcontent.children.forEach(element => {element.active = false});for (let i = 0; i < this.optionDatas.length; i++) {const element = this.optionDatas[i];let node = content.children[i]if (!node) {node = cc.instantiate(item)node.parent = content;}if (!node) content;let lable = node.getComponentInChildren(cc.Label)let sprite = node.getComponentInChildren(cc.Sprite)if (lable) lable.string = element.optionString || ""if (sprite) sprite.spriteFrame = element.optionSf || nullif (lable || sprite) node.active = true;node.getChildByName("choose").active = i == this.chooseIndex;node.getComponent(cc.Button).clickEvents[0].customEventData = i + "";}if (this.chooseIndex >= 0) {const chooseData = this.optionDatas[this.chooseIndex];if (this.spriteCaption) this.spriteCaption.spriteFrame = chooseData.optionSf || nullif (this.labelCaption) this.labelCaption.string = chooseData.optionString || ""}this.template.node.height = Math.min(cc.winSize.height / 2 + this.node.y, this.optionDatas.length * this.optionItem.height)this.template.node.y = this.node.y - this.node.height / 2this.template.node.x = this.node.xthis.template.node.width = this.node.width}updateChoose() {let content = this.template.contentfor (let i = 0; i < this.optionDatas.length; i++) {let node = content.children[i]if (!node) returnnode.getChildByName("choose").active = i == this.chooseIndex;}if (this.chooseIndex >= 0) {const chooseData = this.optionDatas[this.chooseIndex];if (this.spriteCaption) this.spriteCaption.spriteFrame = chooseData.optionSf || nullif (this.labelCaption) this.labelCaption.string = chooseData.optionString || ""}}onOptionClick() {this.showTemplate = !this.showTemplatethis.updateShowTamplate()}showTample() {this.showTemplate = truethis.updateShowTamplate()}hideTample() {this.showTemplate = falsethis.updateShowTamplate()}updateShowTamplate() {this.template.node.active = this.showTemplate;this.arrow.scaleY = this.showTemplate ? -1 : 1}onTouchStart() {this.hideTample()}
}