Question

此问题涉及向Scrollview（而不是曲面）添加视图。

使用单个曲面添加视图时，一切似乎都按预期工作。每个视图整齐地堆叠在一起。

然而，当添加具有多个曲面的视图时，它们不能很好地堆叠。在这种情况下，每个View似乎都设置为scrollview视口的确切高度。因此，如果每个View只有100px高，并且scrollview视口的高度为500px，则滚动时每个View之间将有400px的空白。此外，如果视图高于scrollview vp，则视图将重叠。

所以问题是：如何添加一个View将多个曲面添加到scrollview并让它们堆叠得很好？

构建scrollview的示例函数......

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;
});

Answer 1

View不知道应该有多大。如果在示例中调用temp.getSize（），则返回“undefined”。您将需要在初始化期间显式设置大小。如果您必须在初始化后设置大小，它将是..

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);
}

在Famo.us中向Scrollview添加视图

1 个答案: