Cocos Creator 上手记录 七

# 计时器的应用

* 相对于setTimeout/setInterval 的优势: 更灵活, 与组件结合的更好

  API：Component.schedule  -- 开始一个计时器

  .scheduleOnce -- 开始一个只执行一次的计时器

  .unschedule -- 取消计时器

  .unscheduleAllCallbacks -- 取消组件上的所有计时器

    创建计时器时可选四个参数： 回调函数, 定时时间(单位: s), 执行次数, 延迟多少时间开始计时器。

    销毁计时器时参数： 回调函数。 可在计时器回调函数中销毁计时器。

# CocosUI组件的使用

* cocos没有弹窗的概念，只能自己创建一个节点通过禁用/激活或者添加/删除来完成弹窗的行为。

- 背景层： 背景层应该使用组件 cc.BlockInputEvents 作用：拦截所有输入事件(鼠标与触摸), 防止事件穿透到下层其他节点。

背景可以用一个纯色sprite组件实现，node节点上设置颜色及透明度，然后利用Widget组件设置上下左右四周边距为0，即可实现背景阴影遮罩。

- 弹窗容器: 弹窗容器应与背景层同级，不能嵌套在背景层中，如果容器变成背景层子元素，那么容器将继承背景层透明度设置，这样弹窗出来后是半透明的。

- 显示/隐藏: 显示隐藏可以通过控制容器节点的active属性完成，为Boolean值。 也可以通过控制容器的创建与销毁来完成，例如提示弹窗。

* pageView组件: pageView组件可以设置一个左右滑动的切换页，必须绑定节点content(即可滑动节点容器)。 子元素view下mask组件可选择矩形/圆角/图片大小遮罩类型

组件可在编辑器中添加事件监听，也可在代码中添加。 代码中监听页面滑动 this.pageView.on('page-turning', this.callBack, this);可在每次切换页面时触发。

this.pageView.getCurrentPageIndex(); 可返回页面当前所在页面下标，下标从 0 开始。

this.pageView.setCurrentPageIndex(index: number); 可设置当前页面。 会自动滑到设置的界面。

* Layout组件： 布局组件，用于规范子元素排列顺序，type 属性可选横向/纵向/网格/none排列方式。 Padding属性规定左右及相邻子元素之间间距。

当改变组件子元素大小的时候，可以使用updateLayout()方法重新调整布局。

* Progress： 进度条组件，参考教程。