ScrollView 組件

ScrollView 是一種帶滾動功能的容器，它提供一種方式可以在有限的顯示區(qū)域內(nèi)瀏覽更多的內(nèi)容。通常 ScrollView 會與Mask組件配合使用，同時(shí)也可以添加ScrollBar組件來顯示瀏覽內(nèi)容的位置。

點(diǎn)擊 屬性檢查器 下面的 添加組件 按鈕，然后從添加 UI組件中選擇ScrollView，即可添加ScrollView組件到節(jié)點(diǎn)上。
滾動視圖的腳本借口請參考
ScrollView API

ScrollView 屬性

ScrollView 事件

Scrollview 的事件回調(diào)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是 ScrollView 本身，第二個(gè)參數(shù)是 ScrollView 的事件類型。

詳細(xì)說明

ScrollView組件必須有指定的content節(jié)點(diǎn)才能起作用，通過指定滾動方向和content節(jié)點(diǎn)再此方向長度來計(jì)算滾動時(shí)的位置信息，content節(jié)點(diǎn)也可以通過UIwidget設(shè)置自動resize。

通常的一個(gè)ScrollView的節(jié)點(diǎn)樹如下：

這里的View用來定義一個(gè)可以顯示的滾動區(qū)域，所以通常Mask組件會被添加到View上面，滾動的內(nèi)容可以直接放到content節(jié)點(diǎn)或者添加到content中的子節(jié)點(diǎn)上。

ScrollBar 設(shè)置

ScrollBar 是可選的，你可以選擇只設(shè)置水平或者垂直 ScrollBar，當(dāng)然也可以兩者都設(shè)置。

建立關(guān)聯(lián)可以通過在 層級管理器 里面拖拽一個(gè)帶有 ScrollBar 組件的節(jié)點(diǎn)到 ScrollView 的相應(yīng)字段完成。

通過腳本代碼添加回調(diào)

方法一

這種方法添加的事件回調(diào)和使用編輯器添加的事件回調(diào)是一樣的，通過代碼添加， 你需要首先構(gòu)造一個(gè) cc.Component.EventHandler 對象，然后設(shè)置好對應(yīng)的 target, component, handler 和 customEventData 參數(shù)。

cc.Class({
    extends: cc.Component,

    properties: {

    },

    onLoad () {

        var scrollViewEventHandler = new cc.Component.EventHandler();
        scrollViewEventHandler.target = this.node; //這個(gè) node 節(jié)點(diǎn)是你的事件處理代碼組件所屬的節(jié)點(diǎn)
        scrollViewEventHandler.component = "ScrollView1Script";//這個(gè)是腳本文件名
        scrollViewEventHandler.handler = "callback";
        scrollViewEventHandler.customEventData = "foobar";
        var scrollview = this.node.getComponent(cc.ScrollView);
        scrollview.scrollEvents.push(scrollViewEventHandler);


    },

    //注意參數(shù)的順序和類型是固定的
    callback: function (scrollview, eventType, customEventData) {
        //這里 scrollview 是一個(gè) Scrollview 組件對象實(shí)例
        //這里的 eventType === cc.ScrollView.EventType enum 里面的值
        //這里的 customEventData 參數(shù)就等于你之前設(shè)置的 "foobar"
        console.log(customEventData);
    }

});

方法二

通過 scrollview.node.on('scroll-to-top', ...) 的方式來添加

//假設(shè)我們在一個(gè)組件的 onLoad 方法里面添加事件處理回調(diào)，在 callback 函數(shù)中進(jìn)行事件處理:

cc.Class({
    extends: cc.Component,


    properties: {
       scrollview: cc.ScrollView
    },

    onLoad: function () {
       this.scrollview.node.on('scroll-to-top', this.callback, this);
    },

    callback: function (event) {
       //這里的 event 就是ScrollView 組件
       //另外，注意這種方式注冊的事件，也無法傳遞 customEventData
    }
});

同樣的，你也可以注冊 'scrolling', 'touch-up' , 'scrolling' 等事件，這些事件的回調(diào)函數(shù)的參數(shù)與 'scroll-to-top' 的參數(shù)一致。

關(guān)于完整的 ScrollView 的事件列表，可以參考 ScrollView 的 API 文檔。

ScrollView 的實(shí)例

文章開頭的實(shí)例是怎么做出來的？

需要的資源:

• 網(wǎng)上下載的圖片

步驟

第一步建立節(jié)點(diǎn)樹操作

• 在層級管理器中添加一個(gè)新的UI組件ScrollView名為MyScrollView，節(jié)點(diǎn)樹如下

• 將content其中的item刪除，也可以直接在item上修改，我是直接刪除，添加一個(gè)Scrite(精靈),將下載的圖片拖到資源管理器，然后在將圖片拖入到Scrite(精靈)中的Scrite Frame中

• 復(fù)制一份ScrollBar分別命名為ScrollBarV、ScrollBarH，豎向滾動條、橫向滾動條

• 調(diào)整MyScrollView子節(jié)點(diǎn)的位置

節(jié)點(diǎn)樹完成圖如下

第二部創(chuàng)建Widget對齊組件、自動布局

• 在MyScrollView節(jié)點(diǎn)上添加widget對齊掛件，設(shè)置全屏幕

• View節(jié)點(diǎn)設(shè)置全屏幕

• content節(jié)點(diǎn)的widget以左上角對齊，并添加Layout組件設(shè)置Resize Mode

Layout組件中設(shè)置

• Scrite中設(shè)置 left = 0 px right = 0 px 這個(gè)是為了保證運(yùn)行以后界面顯示的圖片是從左上角開始顯示

設(shè)置content中節(jié)點(diǎn)樹中的的屬性檢查器

• 設(shè)置ScrollBarV的屬性，如圖

豎向滾動，并且是靠右邊，上下對齊，通俗一點(diǎn)，最右邊一豎條
size 主要設(shè)置寬度 w = 12

• 設(shè)置ScrollBarV中的子節(jié)點(diǎn)bar，添加widget組件,bar的size

• 設(shè)置ScrollBarH的屬性，如圖

  橫向滾動，并且是靠左邊，左右對齊，通俗一點(diǎn)，最下邊一橫條 size 主要設(shè)置高度 H = 12

• 設(shè)置ScrollBarV中的子節(jié)點(diǎn)bar，添加widget組件,bar的size

最后一步設(shè)置MyScrollView的屬性檢查器

設(shè)置完成以后運(yùn)行程序，在瀏覽器中就可以看到在文章開頭看到的Gif圖

文章整理并自習(xí)自：

官方文檔

個(gè)人博客地址

玩溜Cocos Creator入門學(xué)習(xí)（四）UI系統(tǒng)介紹UI組件（ScrollView）