前言 本篇在讲什么 本篇简单介绍Lua篇cocos2dx中UIPageView的相关内容 仅介绍简单的应用，仅供参考 本篇适合什么 适合初学Cocos2dX的小白 适合想要在Cocos2dx-lua中使用UIPageView的人 本篇需要什么 对Lua语法有简单认知 对Cocos2dx-Lua有简单认知 Cocos2dx-Lua 3.15的开发环境 本篇的特色 具有全流程的图文教学 重实践，轻理论，快速上手 提供全流程的源码内容

---

★提高阅读体验★ 👉 ♠ 一级标题 👈 👉 ♥ 二级标题 👈 👉 ♣ 三级标题 👈 👉 ♦ 四级标题 👈

---

---

♠ 简介

UIPageView是继承自ListView的容器，ListView又继承自ScrollView，其本质是在ScrollView基础上拓展的，可供开发者做水平或垂直方向的翻页容器

---

♥ 翻页原理

我们在上一章节学习了和UIScrollView相关的内容，在ScrollView中我们知道存在一个叫自动滚动的内容，如下述代码所示, PageView翻页的原理就更简单了，其实就是计算好页面的宽度或长度，翻页的时候给一个自动滚动的距离和时间

// ScrollView中的调用
void ScrollView::startAutoScrollToDestination(const Vec2& destination, float timeInSec, bool attenuated)
{
    startAutoScroll(destination - _innerContainer->getPosition(), timeInSec, attenuated);
}


// PageView中的调用
void PageView::scrollToItem(ssize_t itemIndex, float time)
{
    if (_innerContainerDoLayoutDirty) {
        this->forceDoLayout();
    }
    ListView::scrollToItem(itemIndex, Vec2::ANCHOR_MIDDLE, Vec2::ANCHOR_MIDDLE, time >= 0 ? time : _scrollTime);
}

---

♠ 应用

以下我们将通过几个简单的代码示例，来展示PageView的功能

---

♥ 横向翻页容器

我们通过以下代码创建一个横向滚动列表，效果如下所示

local pv            = ccui.PageView:create()
local size          = cc.size(500, 500)

pv:setContentSize(size)
pv:setAnchorPoint(0.5, 0.5)
pv:setDirection(ccui.PageViewDirection.HORIZONTAL)

for i=1,5 do
    local layout = ccui.Layout:create()
    local sp = cc.Sprite:create("dlrb.png")
    layout:addChild(sp)
    sp:setPosition(cc.p(250,250))
    pv:insertPage(layout, i-1)
end

pv:setPosition(640,360)
self:addChild(pv)

要点1：通过ccui.PageView:create()来创建一个翻页列表的实例

要点2：通过setContentSize来设置翻页显示区域

要点3：通过setDirection来设置翻页方向，参数有两个

• ccui.PageViewDirection.NONE ：不翻

• ccui.PageViewDirection.HORIZONTAL ：水平翻页参数

• ccui.PageViewDirection.VERTICAL ：垂直翻页参数

• ccui.PageViewDirection.BOTH ：水平垂直都能翻

---

♠ 常用功能

我们已经可以创建最基础的滚动列表了，面介绍几个常用的功能

---

♥ 插入页面

对于插入页面提供了两个接口

pv:addPage(layout)

pv:insertPage(layout, 0)

要点1：通过addPage来插入页面，页面放在最后面

要点2：通过insertPage来插入页面，可以指定页面插入的位置，从0开始

要点3：所有插入的子页必须是继承自Widget的UI组件

---

♥ 删除页面

pv:removePage(layout)

pv:removePageAtIndex(layout, 0)

pv:removeAllPages();

要点1：通过removePage直接删除子页

要点2：通过removePageAtIndex来根据下标删除子页

要点3：通过removeAllPages删除所有子页

---

♥ 自动翻页

和滚动页面类似，翻页容器提供了自动翻页的功能

pv:scrollToPage(1)

pv:scrollToPage(1, 0.5)

要点1：通过scrollToPage翻到指定页面，可以设置翻动时间

---

♠ 推送

• Github

https://github.com/KingSun5

---

♠ 结语

还有不少其他额外功能，如果感兴趣，自己去扒拉一下吧，若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。

👉 本文属于原创文章，转载请评论留言，并在转载文章头部著名作者出处👈