PageView 组件参考

PageView 是一种页面视图容器.

点击属性检查器下面的添加组件按钮，然后从添加 UI 组件中选择PageView，即可添加 PageView 组件到节点上。

页面视图的脚本接口请参考 PageView API。

PageView 属性

PageView 事件

PageView 的事件回调有两个参数，第一个参数是 PageView 本身，第二个参数是 PageView 的事件类型。

详细说明

PageView 组件必须有指定的 content 节点才能起作用，content 中的每个子节点为一个单独页面，该每个页面的大小为 PageView 节点的大小，操作效果分为 2 种：第一种：缓慢滑动，通过拖拽视图中的页面到达指定的 ScrollThreshold 数值（该数值是页面大小的百分比）以后松开会自动滑动到下一页，第二种：快速滑动，快速的向一个方向进行拖动，自动滑倒下一页，每次滑动最多只能一页。

通常一个 PageView 的节点树如下图：

CCPageViewIndicator 设置

CCPageViewIndicator 是可选的，该组件是用来显示页面的个数和标记当前显示在哪一页。

建立关联可以通过在层级管理器里面拖拽一个带有 PageViewIndicator 组件的节点到 PageView 的相应字段完成。

通过脚本代码添加回调

方法一

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，通过代码添加，
你需要首先构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target, component, handler 和 customEventData 参数。

var pageViewEventHandler = new cc.Component.EventHandler();
pageViewEventHandler.target = this.node; // 这个是你的事件处理代码组件所属的节点
pageViewEventHandler.component = "cc.MyComponent"
pageViewEventHandler.handler = "callback";
pageViewEventHandler.customEventData = "foobar";
pageView.pageEvents.push(pageViewEventHandler);
//here is your component file
cc.Class({
    name: 'cc.MyComponent'
    extends: cc.Component,
    properties: {
    },
    // 注意参数的顺序和类型是固定的
    callback: function(pageView, eventType, customEventData) {
        // 这里 pageView 是一个 PageView 组件对象实例
        // 这里的 eventType === cc.PageView.EventType.PAGE_TURNING
        // 这里的 customEventData 参数就等于你之前设置的 "foobar"
    }
});

方法二

通过 pageView.node.on('page-turning', ...) 的方式来添加

// 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:
cc.Class({
    extends: cc.Component,
    properties: {
       pageView: cc.PageView
    },
    onLoad: function () {
       this.pageView.node.on('click', this.callback, this);
    },
    callback: function (event) {
       // 这里的 event 是一个 EventCustom 对象，你可以通过 event.detail 获取 PageView 组件
       var pageView = event.detail;
       // 另外，注意这种方式注册的事件，也无法传递 customEventData
    }
});