cocos2d-js 控件——UIPageView

UIPageView 公有属性、方法

/**
 * 翻页事件类型
 */
enum class EventType
{
    TURNING
};

/**
 * 触摸方向类型
 */
enum class TouchDirection
{
    LEFT,
    RIGHT,
    UP,
    DOWN
};

/**
 * UIPageView页面翻页事件回调
 */
typedef std::function<void(Ref*, EventType)> ccPageViewCallback;

/**
 * 创建一个UIPageView对象
 *@return UIPageView实例
 */
PageView();
static PageView* create();

/**
 * 设置滚动方向
 * @param direction 滚动方向
 */
virtual void setDirection(Direction direction) override;

/**
 * 往UIPageView中添加界面
 * @param page 继承于Widget的实例
 */
void addPage(Widget* page);

/**
 * 往UIPageView中的指定索引处插入界面
 * @param page  继承于Widget的实例
 * @param idx   索引
 */
void insertPage(Widget* page, int idx);

/**
 * 移除指定页面
 * @param page 指定的Widget实例
 */
void removePage(Widget* page);

/**
 * 移除指定页面
 * @param index 指定索引
 */
void removePageAtIndex(ssize_t index);

/**
 * 移除所有页面
 */
void removeAllPages();

/**
 * 滚动至某一页
 * @param idx       指定索引
 * @param itemIndex 指定索引
 */
void scrollToPage(ssize_t idx);
void scrollToItem(ssize_t itemIndex);

/**
 * 获取当前页面索引
 * @return 当前页面索引
 */
ssize_t getCurrentPageIndex() const { return _currentPageIndex; }

/**
 * 跳转到指定的页面
 * @param index 指定索引
 */
void setCurrentPageIndex(ssize_t index);

/**
 * 获取PageView中的所有页面
 * 已弃用，使用”Vector<Widget*>& ListView::getItems()“
 * @return 所有界面
 */
CC_DEPRECATED_ATTRIBUTE Vector<Layout*>& getPages();

/**
 * 根据索引获取指定页面
 * 已弃用，使用“Widget* ListView::getItem(index)”
 * @param index 索引
 * @return Layout页面
 */
CC_DEPRECATED_ATTRIBUTE Layout* getPage(ssize_t index);

/**
 * 添加一个页面回调到PageView，当一个页面翻动时，回调将被调用
 * @param callback 事件回调
 */
void addEventListener(const ccPageViewCallback& callback);

/**
 * 开启页面指示器
 * @param enabled 如果启用页面指示则为true，否则为false
 */
void setIndicatorEnabled(bool enabled);

/**
 * 获取是否开启了页面指示器
 * @return 如果启用页面指示则为true，否则为false
 */
bool getIndicatorEnabled() const { return _indicator != nullptr; }

/**
 * 使用锚点设置页面指示器的位置。
 * @param positionAsAnchorPoint 锚点
 */
void setIndicatorPositionAsAnchorPoint(const Vec2& positionAsAnchorPoint);

/**
 * 获取页面指示器的锚点
 * @return 锚点
 */
const Vec2& getIndicatorPositionAsAnchorPoint() const;

/**
 * 设置页面指示器的位置
 * @param position 坐标
 */
void setIndicatorPosition(const Vec2& position);

/**
 * 获取页面指示器的位置
 * @return 坐标
 */
const Vec2& getIndicatorPosition() const;

/**
 * 设置页面指示器的索引节点之间的间距
 * @param spaceBetweenIndexNodes 间距值
 */
void setIndicatorSpaceBetweenIndexNodes(float spaceBetweenIndexNodes);

/**
 * 获取页面指示器的索引节点之间的间距
 * @return 间距值
 */
float getIndicatorSpaceBetweenIndexNodes() const;

/**
 * 设置页面指示器的索引节点的颜色
 * @param spaceBetweenIndexNodes 颜色，例如：“cc.color(0, 0, 0)”
 */
void setIndicatorSelectedIndexColor(const Color3B& color);

/**
 * 获取页面指示器的索引节点的颜色
 * @return 颜色
 */
const Color3B& getIndicatorSelectedIndexColor() const;

UIPageView示例

// 分页控件初始化
var pageView = new ccui.PageView();
pageView.setContentSize(1099, 609);
pageView.setAnchorPoint(0.5, 0.5);
pageView.setPosition(640, 360);

// 启动分页指示器
pageView.setIndicatorEnabled(true);

// 设置分页指示器索引控件之间的间距
pageView.setIndicatorSpaceBetweenIndexNodes(50);

// 滚动方向
pageView.setDirection(ccui.ScrollView.DIR_VERTICAL);

this.addChild(pageView);

// 添加分页
for (var i = 0; i < 4; i ++) {
    // 容器
    var contain_view = new ccui.Layout();
    contain_view.setSize(pageView.width, pageView.height);
    contain_view.setBackGroundImageScale9Enabled(true);
    contain_view.setBackGroundImage(game.platform.public + "Guide/guide_" + i + ".png");

    pageView.addPage(contain_view);
}

// UIPageView翻页事件回调
pageView.addEventListener(function(sender,event){
    if (type == ccui.PageView.EVENT_TURNING) {
        cc.log("翻页事件回调");
    }
},this);

// 获取每页的内容大小
var contentHeight = pageView.getInnerContainerSize().height;

// UIPageView交互事件回调
pageView.addTouchEventListener(function (sender, type) {
    // 实时获取页码
    cc.log(sender.getCurrentPageIndex());
}.bind(this));

// 滚动至第四页
pageView.scrollToItem(3);