Question

我想用两个表面创建Scrollview，一个用于背景，另一个用于垂直和水平对齐的文本，但我只是想不出来。尝试使用ContainerSurface但似乎不是最好的性能选项。有什么想法吗？

Answer 1

有多种方法。以下是一些例子：

添加单个曲面并作为内容为文本添加div：

var surface = new Surface({
    size: [undefined, 50],
    classes: ['mysurface'],
    content: '<div>my text</div>'
});
surfaces.push(surface); // add to surfaces array

添加样式：

    .mysurface {
        background: 'red'
    }

    .mysurface div {
        text-alignment: center;
        line-height: 50px;
    }

创建多个曲面并将它们放在RenderNode中：

var renderNode = new RenderNode(new Modifier({
    size: [undefined, 50]
}));

// Add background surface to rendernode
var backSurface = new Surface({
    classes: ['mysurface']
});
renderNode.add(backSurface);

// Add text surface and translate it in z-space 1 unit so it lies in front of backSurface
var textSurface = new Surface({
    content: 'this is the text'
});
renderNode.add(new Modifier({
    transform: Transform.translate(0, 0, 1) 
})).add(textSurface);

// Add to scrollview
surfaces.push(renderNode);

创建实际视图并将其添加到scrollview（请参阅famo.us university）

使用layout-flex：

之类的布局视图/解决方案

var item = new LayoutController({
    layout: function(context, options) {
       var dock = new LayoutDockHelper(context, options);
       dock.fill('back'); // size back to fill whole content
       dock.margins(5); // indent 5 pixel margins all around
       dock.fill('text'); // fill text to remaining inner space
    },
    dataSource: {
       back: new Surface({...}),
       text: new Surface({...}),
    }    
});
surfaces.push(item);

https://github.com/IjzerenHein/famous-flex

Answer 2

您可以使用顺序布局添加它，如下所示：

define(function(require, exports, module) {
var Engine           = require("famous/core/Engine");
var Surface          = require("famous/core/Surface");
var SequentialLayout = require("famous/views/SequentialLayout");

var mainContext = Engine.createContext();

var sequentialLayout = new SequentialLayout({
    direction: 1
});
var surfaces = [];

sequentialLayout.sequenceFrom(surfaces);

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

mainContext.add(sequentialLayout);

}）;

我怎么能添加两个表面到famo.us Scrollview？

2 个答案: