Question

我已经创建了一个水平ScrollView并为其添加了一些Surfaces。当我滚动（滑动）视图时，我希望在Surface之间有一个空的空格。我已尝试在Surfaces和ScrollView的属性中设置边距，填充，边框等。但无论如何，曲面都保持连接在一起。

有谁知道我怎么能做到这一点？

Answer 1

这可以通过几种方式完成。 nonfamo.us方法是添加曲面并使用内容HTML创建边距。为了举例，我假设您需要一个只需要一些余量的曲面列表！

我在SequntialLayout中了解了itemSpacing，并且很惊讶在ScrollView中也找不到这样的东西。因此，为了解决这个问题，我只需将所有表面添加到SequentialLayout，然后将其添加为Scrollview中的唯一项目。

另请注意，我添加了背景曲面，以捕捉曲面之间发生的鼠标事件！

这就是我所做的..希望它有所帮助！

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var Scrollview          = require("famous/views/Scrollview");
var SequentialLayout    = require("famous/views/SequentialLayout");

var mainContext = Engine.createContext();

var bg = new Surface({ size:[undefined,undefined] });

var scrollview = new Scrollview();
var scrollSurfaces = [];

scrollview.sequenceFrom(scrollSurfaces);

var sequentialLayout = new SequentialLayout({itemSpacing:20});
var surfaces = [];
sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 40; i++) {
    var surface = new Surface({
        content: "Surface: " + (i + 1),
        size: [undefined, 200],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            lineHeight: "200px",
            textAlign: "center"
        }
    });

    surface.pipe(scrollview);
    surfaces.push(surface);
}

scrollSurfaces.push(sequentialLayout);

bg.pipe(scrollview);

mainContext.add(bg);

mainContext.add(scrollview);

Answer 2

我认为使用ContainerSurface更好，使用许多containsurfaces来包含表面。你应该在Apple iphone 5中模拟。在其他环境中，你应该调整scrollModifier的来源来修复。

define(function(require, exports, module) {
    var Engine           = require("famous/core/Engine");
    var Surface          = require("famous/core/Surface");
    var Transform        = require("famous/core/Transform");
    var View             = require('famous/core/View');
    var StateModifier    = require('famous/modifiers/StateModifier');
    var Scrollview       = require("famous/views/Scrollview");
    var Modifier         = require("famous/core/Modifier");
    var ContainerSurface = require("famous/surfaces/ContainerSurface");


    var mainContext = Engine.createContext();

    var scrollview = new Scrollview({
        direction: 0,
        paginated: 'true',
        pageStopSpeed: 2
    });

    var scrollnodes = [];
    scrollview.sequenceFrom(scrollnodes);

    for (var i = 0; i < 40; i++) {

        var container = new ContainerSurface();

        var temp = new Surface({
            content: "Surface: " + (i + 1),
            size: [window.innerWidth -40, window.innerHeight - 40],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            }
        });

        // wrong
        // will return temp as scrollnode, it will ignore the container
        // var scrollnode = container.add(temp)

        // this is right
        container.add(temp);
        var scrollnode = container;

        temp.pipe(scrollview);
        scrollnodes.push(scrollnode);

    }

    var scrollModifier = new StateModifier({
        origin: [0.07, 0.04]
    });

    mainContext.add(scrollModifier).add(scrollview);
});

Answer 3

您还可以使用FlexScrollView，它支持spacing选项来实现此目的：

var scrollView = new FlexScrollView({ layoutOptions: { spacing: 10 } });

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex

如何在famo.us中的ScrollView中的Surfaces之间创建空白空间？

3 个答案: