【cocos creator】下拉框

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 = false


    protected start(): void {
        if (this.touchNode) {
            this.touchNode.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
            //@ts-ignore
            this.touchNode._touchListener.setSwallowTouches(false);//取消触摸节点的穿透事件
        }
        this.reset()
        let data = [{ optionString: "11" }, { optionString: "22" }]
        this.init(data)
    }

    reset() {
        this.showTemplate = false
        this.spriteCaption.spriteFrame = null;
        this.labelCaption.string = "";
        this.chooseIndex = -1
        this.template.node.active = this.showTemplate;
        let content = this.template.content
        content.children.forEach(element => {
            element.active = false
        });
        this.optionDatas = [];
        this.upDateTemplate()
    }

    init(data: DropDownOptionData[]) {
        this.optionDatas = data
        this.upDateTemplate()
    }

    chooseItem(event, data) {
        let number = Number(data)
        this.chooseIndex = isNaN(number) ? -1 : number
        this.updateChoose()
        this.hideTample()
    }

    upDateTemplate() {
        let content = this.template.content
        let item = this.optionItem
        content.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 || null
            if (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 || null
            if (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 / 2
        this.template.node.x = this.node.x
        this.template.node.width = this.node.width
    }

    updateChoose() {
        let content = this.template.content
        for (let i = 0; i < this.optionDatas.length; i++) {
            let node = content.children[i]
            if (!node) return
            node.getChildByName("choose").active = i == this.chooseIndex;
        }
        if (this.chooseIndex >= 0) {
            const chooseData = this.optionDatas[this.chooseIndex];
            if (this.spriteCaption) this.spriteCaption.spriteFrame = chooseData.optionSf || null
            if (this.labelCaption) this.labelCaption.string = chooseData.optionString || ""
        }
    }

    onOptionClick() {
        this.showTemplate = !this.showTemplate
        this.updateShowTamplate()
    }

    showTample() {
        this.showTemplate = true
        this.updateShowTamplate()
    }

    hideTample() {
        this.showTemplate = false
        this.updateShowTamplate()
    }

    updateShowTamplate() {
        this.template.node.active = this.showTemplate;
        this.arrow.scaleY = this.showTemplate ? -1 : 1
    }

    onTouchStart() {
        this.hideTample()
    }
}