0

この問題は、(サーフェスではなく) Scrollview にビューを追加することに関係しています。

単一のサーフェスを持つビューを追加すると、すべてが意図したとおりに機能するようです。各ビューは、互いの上にきれいに積み重なっています。

ただし、複数のサーフェスを含むビューを追加すると、うまくスタックしません。この場合、各ビューはスクロールビュー ビューポートの正確な高さに設定されているようです。したがって、各ビューの高さが 100 ピクセルしかなく、スクロールビュー ビューポートの高さが 500 ピクセルの場合、スクロール時に各ビューの間に 400 ピクセルの空白ができます。また、View が scrollview vp よりも高い場合、View はオーバーラップします。

質問は次のとおりです。複数のサーフェスをスクロールビューに追加し、それらをうまくスタックさせるにはどうすればよいですか?

スクロールビューを構築する関数の例...

function _createScrollview() {
    var scrollview = new Scrollview();
    var surfaces = [];
    scrollview.sequenceFrom(surfaces);

    for (var i = 0, temp; i < 10; i++) {
        temp = new TestView();
        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    this.add(scrollview);
}

ビューの例...

define(function(require, exports, module) {
    var View          = require('famous/core/View');
    var Surface       = require('famous/core/Surface');
    var Transform     = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');

    // constructor
    function TestView() {
        View.apply(this, arguments);

        _createBox_a.call(this);
        _createBox_b.call(this);
    }

    // prototype
    TestView.prototype = Object.create(View.prototype);
    TestView.prototype.constructor = TestView;

    // options
    TestView.DEFAULT_OPTIONS = {};

    // helper functions
    function _createBox_a() {
        var surf = new Surface({
            size: [undefined, 150],
            properties: {
                backgroundColor: 'red',
            }
        });
        surf.pipe(this._eventOutput);
        this.add(surf);
    }

    function _createBox_b() {
        var surf = new Surface({
            size: [undefined, 150],
            properties: {
                backgroundColor: 'blue'
            }
        });
        var mod = new StateModifier({
            transform: Transform.translate(0, 150, 0)
        });
        surf.pipe(this._eventOutput);
        this.add(mod).add(surf);
    }

    module.exports = TestView;
});
4

1 に答える 1

2

ビューは、それがどのくらいの大きさであるべきかを知りません。この例で temp.getSize() を呼び出すと、「未定義」が返されます。初期化中にサイズを明示的に設定する必要があります。初期化後にサイズを設定する必要がある場合は、..

view.setOptions({size:someSize});

_createScrollview の外観は次のとおりです。

お役に立てれば！

function _createScrollview() {
    var scrollview = new Scrollview();
    var surfaces = [];
    scrollview.sequenceFrom(surfaces);

    for (var i = 0, temp; i < 10; i++) {
        temp = new TestView({size:[undefined,300]});
        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    this.add(scrollview);
}
于 2014-05-29T23:27:48.140 に答える