cc.scrollView基础用法

最新推荐文章于 2024-08-06 19:22:08 发布

原创最新推荐文章于 2024-08-06 19:22:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scrollview

cocos2d-js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用 Cocos2d-x 实现一个水平滚动视图，包括设置滚动方向、触控及反弹效果，并通过添加多个颜色层来模拟内容的无限滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var testLayer = cc.Layer.extend({
    ctor : function(){
        this._super();

        this.init();

        return true;
    },

    init : function(){
        var csv = new cc.ScrollView();
        csv.setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL);
        csv.setTouchEnabled(true);
        csv.setBounceable(true);
        csv.setViewSize(cc.size(500, 400));
        csv.setAnchorPoint(cc.p(0, 0));
        csv.x = 0;
        csv.y = 0;
        this.addChild(csv);
        csv.setContentSize(cc.size(500, 400));

        var layer = new cc.LayerColor();
        layer.setColor(cc.color(0, 255, 255));
        csv.setContainer(layer)
        for(var i = 0; i < 8; i++){
            var widthList = new cc.LayerColor();
            widthList.attr({
                x      : i * 100 + (i + 1) * 20,
                y      : 0,
                width  : 100,
                height : 500,
                color  : colorList[i]
            });
            csv.addChild(widthList);
        }
        var childWidth = 0;
        for(var i = 0; i < csv.getContainer().children.length; i++){
            childWidth += csv.getContainer().children[i].width + 20;
        }
        cc.log("【打印】childWidth：",childWidth,csv.children.length);
        csv.setContentSize(cc.size(childWidth, 400));
        cc.log("【scrollView】打印：", csv.getContentSize().width, csv.getContentSize().height);

    }
});