wordpress程序网站,建网站报价表,安阳专业做网站公司,甘州区建设局网站本篇文章主要讲解#xff0c;cocos中在预制体操作过程中#xff0c;父级预制体生成的数据列表中#xff0c;绑定了子预制体中的事件#xff0c;在子预制体的时间中如何控制上级列表的具体操作教程。 日期#xff1a;2023年11月10日 作者#xff1a;任聪聪 一、实际效果情… 本篇文章主要讲解cocos中在预制体操作过程中父级预制体生成的数据列表中绑定了子预制体中的事件在子预制体的时间中如何控制上级列表的具体操作教程。 日期2023年11月10日 作者任聪聪 一、实际效果情况 说明预制体弹出框中的预制体item给予item预制体的文本绑定点击事件点击后即可传递数据到父级home脚本中进行更新。
二、制作父级预制体及子预制体
步骤一、创建空节点如下图 步骤二、创建名为“popup_list” 的节点及背景图如下图。 注意点击修改所有的信息如图红框内所示。
步骤三、创建滚动窗 创建后名称改为ScrollView
步骤四、将item设置为预制体
注意记得解锁左侧的红色小锁点击一下就可以。 设置完毕 创建对应的预制体脚本如下图item.ts
步骤五、创建home场景及home脚本并将上述的弹出界面存到里面 说明点击保存即可进行配置优先创建空的home然后保存到home的fire界面。
创建home脚本并声明预制体及父节点信息如下内容 home.ts
import item from ./prefab/item;const {ccclass, property} cc._decorator;ccclass
export default class home extends cc.Component {property({type: cc.Node,displayName: 预制体父节点})protected prefabFatherNode: cc.Node null;property({type: cc.Prefab,displayName: item预制体})protected itemPrefab: cc.Prefab null;protected preData: Array{ title: string,id:number,bg_color:string} [];onLoad() {this.node.on(up_list, this.onListUpdate, this);this.echoList();}//监听更新protected onListUpdate(data: any): void {console.log(父节点回收到的数据:, data.detail);this.echoList(data.detail.id);}//输出列表echoList(theId0){let that this;let temporaryData null;let num 0;for (let i 0; i 60; i) {temporaryData {title: ,id: 0,bg_color: #000000,};const id num;temporaryData.title ${id};temporaryData.id id;that.preData.push(temporaryData);}console.log(that.preData);if (theId ! 0) {// 更新预制体let prefabChildren that.prefabFatherNode.children;for (let i 0; i prefabChildren.length; i) {let prefabChild prefabChildren[i];let itemComponent prefabChild.getComponent(item);//that.preData 会记录上一次的修改所以要进行颜色的还原that.preData[i].bg_color #000000;if (itemComponent itemComponent.getData().id theId) {that.preData[i].bg_color #C0331F;}itemComponent.updatePre(that.preData[i]);}} else {// 创建新的预制体let length that.preData.length;for (let i 0; i length; i) {let prefabricatedObject cc.instantiate(that.itemPrefab);prefabricatedObject.parent that.prefabFatherNode;prefabricatedObject.getComponent(item).createdPre(that.preData[i]);}}}// update (dt) {}
}
配置content属性 给home.ts绑定脚本 拖拽关联预制体和父节点
步骤六、创建预制体并绑定脚本
点击打开预制体 点选预制体场景信息后在左侧进行用户脚本的关联如下图 说明选择item。
配置item.ts的脚本内容
const {ccclass, property} cc._decorator;ccclass
export default class item extends cc.Component {property(cc.Label)label: cc.Label null;private data: any null; // 保存预制体的数据//点击事件监听 回调到home脚本protected onClick(theId): void {console.log(点击测试);let newData {id:theId}; let customEvent new cc.Event.EventCustom(up_list, true);customEvent.detail newData;//自定义的数据调用处this.node.dispatchEvent(customEvent);//亲测有效的方式使用this.node.parent.emit(xxxx,{[]});没有反应}/*** 初始化* param data */createdPre(data: { title: string,id:number,bg_color:string }) {let that this;that.data data;console.log(data);that.label.string 我是第data.title个预制体。;that.label.node.color new cc.Color().fromHEX(data.bg_color);//给label 注册事件监听that.node.on(cc.Node.EventType.TOUCH_END,function(){const theId data.id;//获取当前的id并返回用于更新数据that.onClick(theId);})}//更新预制体updatePre(data: any) {this.data data;this.label.string 我是第data.title个预制体。;this.label.node.color new cc.Color().fromHEX(data.bg_color);}//返回当前预制体的数据getData(): any {return this.data;}}关联对象信息拖拽到指定的框即可 end大功告成运行进行测试。
