cocos2d-js 中scrollview详解

/****
开头的一些废话：
1、多思考，善于思考
2、懂得变通
3、多多查询API
 
   首先复制一段 API中的源码：（UIScrollView.js）这段代码可以看出  scrollview
中的容器是一个node，并且他的位置是：代码最后一行，算了 有人可能不会仔细看，
最后一行的意思就是容器节点的锚点默认是(0,0);然后，x位置是0，y的位置是scrollview
的高减去容器的高；这样设置的意义是容器如果设置的很大的话，就会把空间想向下方延伸
！！！
***/
_initRenderer: function () {
    ccui.Layout.prototype._initRenderer.call(this);

    this._innerContainer = new ccui.Layout();
    this._innerContainer.setColor(cc.color(255,255,255));
    this._innerContainer.setOpacity(255);
    this._innerContainer.setCascadeColorEnabled(true);
    this._innerContainer.setCascadeOpacityEnabled(true);

    this.addProtectedChild(this._innerContainer, 1, 1);
},

_onSizeChanged: function () {
    ccui.Layout.prototype._onSizeChanged.call(this);
    var locSize = this._contentSize;
    this._topBoundary = locSize.height;
    this._rightBoundary = locSize.width;
    var bounceBoundaryParameterX = locSize.width / 3;
    var bounceBoundaryParameterY = locSize.height / 3;
    this._bounceTopBoundary = locSize.height - bounceBoundaryParameterY;
    this._bounceBottomBoundary = bounceBoundaryParameterY;
    this._bounceLeftBoundary = bounceBoundaryParameterX;
    this._bounceRightBoundary = locSize.width - bounceBoundaryParameterX;
    var innerSize = this._innerContainer.getContentSize();
    this._innerContainer.setContentSize(cc.size(Math.max(innerSize.width, locSize.width), Math.max(innerSize.height, locSize.height)));

    /****此处可以这样进行修改，把容器类的位置设置成(0,0)
     *
     这样的好处是把  最开出现的东西 显示为容器最低端的节点，可以在开始的时候
     * 实现往下滑动，这样的实现了容器的空间是向上进行延伸的。
     *
     * 若不改动的话，最开始显示的是容器最顶端的东西，这可以向下滑动
     *这就是两种效果，看你需要什么样的效果，就怎么改！！！

     * ****/
    this._innerContainer.setPosition(0,0);

//this._innerContainer.setPosition(0, locSize.height - this._innerContainer.getContentSize().height);
},
//还有一点需要讲一下，scrollview添加子节点的时候，返回的是容器的添加：
//API源码：
addChild: function (widget, zOrder, tag) {
    if(!widget)
        return false;
    zOrder = zOrder || widget.getLocalZOrder();
    tag = tag || widget.getTag();
//此处返回的是容器添加节点， scrollview 的size只是需要显示的区域的大小
    return this._innerContainer.addChild(widget, zOrder, tag);
},
/****
 * 以下是我所编写的源码：
 * *****/
//新建一个节点，在节点上添加scrollview
init:function()
{
    //初始化一个node
    var Node = new cc.Node()
    Node.attr({
        anchorX:0,
        anchorY:0,
        x:0,
        y:0
    })
    this.addChild(Node,2);
    this._Node = Node;
}

BothScrollview:function()
{
    var scrollView = new ccui.ScrollView();
    //设置方向
    scrollView.setDirection(ccui.ScrollView.DIR_VERTICAL);
    //触摸的属性
    scrollView.setTouchEnabled(true);
    //弹回的属性
    // scrollView.setBounceEnabled(true);
    //滑动的惯性
    scrollView.setInertiaScrollEnabled(true);
    scrollView.setBackGroundImageScale9Enabled(true);
    //设置背景
    scrollView.setBackGroundImage(res.Bghong_jpg);
    //设置scrollview的大小，相当于是显示的区域
    scrollView.setContentSize(cc.size(640, 1140));
    //设置容器的大小 这个容器就是存放scrollview添加的节点，需要设置他的位置，上面已经讲清楚
    scrollView.setInnerContainerSize(cc.size( 640,6840));
    //可以添加触摸事件监听器
    scrollView.addTouchEventListener(this.scrollviewCall,this)
    //锚点默认是 （0,0）
    scrollView.setAnchorPoint(0,0)
    scrollView.x = 0
    scrollView.y = 0
    //自己新建一个节点
    this._Node.addChild(scrollView);

    //layer的锚点默认是(0,0),现在设置ImageView
    var imageBg = new ccui.ImageView(res.liuheyi_jpg);
    imageBg.setAnchorPoint(0,0);
    imageBg.setPosition(0,0);

    scrollView.addChild(imageBg,1);
    //添加按钮层
    var  buttonlayer = new ButtonLayer();
    buttonlayer.setPosition(0,0);
    buttonlayer.setContentSize(cc.size(600,6840))
    scrollView.addChild(buttonlayer,3)

    //本示例引擎的版本是 3.8.1


},