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

---

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

---

---

♠ 简介

UIScrollView是继承自Layer的容器，本质是可供开发者做水平或垂直方向的滚动容器

---

♥ 滚动原理

滚动原理很简单，从c++代码内可以看到，UIScrollView组件在初始化的时候创建了一个名为_innerContainer的Layout组件，所有的子控件均挂载在该组件下

void ScrollView::initRenderer()
{
    Layout::initRenderer();
    _innerContainer = Layout::create();
    _innerContainer->setColor(Color3B(255,255,255));
    _innerContainer->setOpacity(255);
    _innerContainer->setCascadeColorEnabled(true);
    _innerContainer->setCascadeOpacityEnabled(true);
    addProtectedChild(_innerContainer, 1, 1);
}

然后在点击事件内会根据点击前后的位置差来设置_innerContainer的位置，进而达到滚动的效果

---

♠ 应用

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

---

♥ 横向滚动列表

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

local sv            = ccui.ScrollView:create()
local size          = cc.size(1280, 720)

sv:setContentSize(size)
sv:setAnchorPoint(0.5, 0.5)
sv:setDirection(ccui.ScrollViewDir.horizontal)

for i=1,10 do
    local sp = cc.Sprite:create("dlrb.png")
    sv:addChild(sp)
    sp:setPosition(cc.p(i*350, size.height/2))
end

sv:setInnerContainerSize({width = 4000, height = size.height})
sv:setPosition(640,360)

self:addChild(sv)

要点1：通过ccui.ScrollView:create()来创建一个滚动列表的实例

要点2：通过setContentSize来设置滚动显示区域

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

• ccui.ScrollViewDir.horizontal ：水平滚动参数

• ccui.ScrollViewDir.vertical ：垂直滚动参数

要点4：通过setInnerContainerSize来设置滚动容器的范围，就是可滑动的范围，不设置滚不了

---

♠ 附加功能

我们已经可以创建最基础的滚动列表了，基类中还提供了很多额外的效果，例如回弹，自动滚动等，下面介绍几个常用的功能

---

♥ 隐藏滚轴

位于右侧和下方的滚动轴，默认是显示的，通过下面接口隐藏

sv:setScrollBarEnabled(false)

---

♥ 回弹

在滚动边界增加回弹效果

sv:setBounceEnabled(true)

---

♥ 惯性

在滑动很快的时候，松手，列表会按照惯性滑动一定距离，默认true，不想要可以设置成false

sv:setInertiaScrollEnabled(true)

---

♥ 自动滚动

官方提供了可以自动滚动的接口，包括不限于滚动到最左侧、最右侧、最上、最下、固定进度等

virtual void scrollToBottom(float timeInSec, bool attenuated);

virtual void scrollToTop(float timeInSec, bool attenuated);

virtual void scrollToLeft(float timeInSec, bool attenuated);

virtual void scrollToRight(float timeInSec, bool attenuated);

virtual void scrollToTopLeft(float timeInSec, bool attenuated);

virtual void scrollToTopRight(float timeInSec, bool attenuated);

virtual void scrollToBottomLeft(float timeInSec, bool attenuated);

virtual void scrollToBottomRight(float timeInSec, bool attenuated);

virtual void scrollToPercentVertical(float percent, float timeInSec, bool attenuated);

virtual void scrollToPercentHorizontal(float percent, float timeInSec, bool attenuated);

virtual void scrollToPercentBothDirection(const Vec2& percent, float timeInSec, bool attenuated);

下面为自动在2s内滚到最右侧，参数attenuated表示力道逐渐衰减

sv:scrollToRight(2, true)

---

♥ 跳转位置

官方提供了可以直接跳转到某个位置，包括不限于跳转到最左侧、最右侧、最上、最下、固定进度等

virtual void jumpToBottom();

virtual void jumpToTop();

virtual void jumpToLeft();

virtual void jumpToRight();

virtual void jumpToTopLeft();

virtual void jumpToTopRight();

virtual void jumpToBottomLeft();

virtual void jumpToBottomRight();

virtual void jumpToPercentVertical(float percent);

virtual void jumpToPercentHorizontal(float percent);

virtual void jumpToPercentBothDirection(const Vec2& percent);

下面代码，滚轴会跳转到最右侧

sv:jumpToRight()

---

♠ 推送

• Github

https://github.com/KingSun5

---

♠ 结语

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

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