PageView 组件参考
点击 属性检查器 下面的按钮,然后从添加 UI 组件
中选择PageView
,即可添加 PageView 组件到节点上。
页面视图的脚本接口请参考 PageView API。
属性 | 功能说明 |
---|---|
Target | 带有脚本组件的节点 |
Component | 脚本组件名称 |
Handler | 指定一个回调函数,当 PageView 的事件发生的时候会调用此函数 |
CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入 |
PageView 的事件回调有两个参数,第一个参数是 PageView 本身,第二个参数是 PageView 的事件类型。
PageView 组件必须有指定的 content 节点才能起作用,content 中的每个子节点为一个单独页面,该每个页面的大小为 PageView 节点的大小,操作效果分为 2 种:第一种:缓慢滑动,通过拖拽视图中的页面到达指定的 ScrollThreshold 数值(该数值是页面大小的百分比)以后松开会自动滑动到下一页,第二种:快速滑动,快速的向一个方向进行拖动,自动滑倒下一页,每次滑动最多只能一页。
通常一个 PageView 的节点树如下图:
CCPageViewIndicator 是可选的,该组件是用来显示页面的个数和标记当前显示在哪一页。
建立关联可以通过在 层级管理器 里面拖拽一个带有 PageViewIndicator 组件的节点到 PageView 的相应字段完成。
通过脚本代码添加回调
方法一
这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加,你需要首先构造一个 cc.Component.EventHandler
对象,然后设置好对应的 target, component, handler 和 customEventData 参数。
方法二
// 假设我们在一个组件的 onLoad 方法里面添加事件处理回调,在 callback 函数中进行事件处理:
cc.Class({
properties: {
pageView: cc.PageView
},
onLoad: function () {
callback: function (event) {
// 这里的 event 是一个 EventCustom 对象,你可以通过 event.detail 获取 PageView 组件
var pageView = event.detail;
// 另外,注意这种方式注册的事件,也无法传递 customEventData
}
});