3

我正在尝试使用著名的sequentialLayout 在滚动视图下方添加图像，并且我对滚动视图的高度有疑问。

这就是我创建滚动视图的方式。

var scrollview = new Scrollview({       
    direction: Utility.Direction.X,
    options: {
        size: [300, 300]
    },        
    paginated: true
});

当我将表面添加到高度为 250 的滚动视图时，包含这些表面的滚动视图的父 DOM 容器（著名组）的宽度和高度为 0。

当在sequentialLayout 中添加此滚动视图作为第一项时，具有高度的第二项或表面将显示在此滚动视图的顶部，因为它没有高度。

任何想法如何使用 Famo.us 解决此问题？

4

1 回答 1

9

您不能这样设置大小 - 为此使用修饰符。

这将是渲染树

MainContext
   SequentialLayout
      Modifier(size)
          ScrollView
      Modifier(size)
          Image

代码片段：

// Create components
var scrollview = new ScrollView();
var image = new ImageSurface({
    content: 'content/images/famous_symbol_transparent.png'
});

// Create Size Modifiers
var scrollModifier = new StateModifier({ size: [200,200]});
var imageModifier = new StateModifier({ size: [200,200]});

// Wrap the Modifier in a RenderNode, so we can add the surface
// (you can't add surfaces directly to a modifier)
var scrollNode = new RenderNode(scrollModifier)
scrollNode.add(scrollview);

var imageNode = new RenderNode(imageModifier);
imageNode.add(image);

// Create a SequentialLayout
var sequence = new SequentialLayout();
sequence.sequenceFrom([scrollNode,imageNode]);

这是一个示例要点main.js（运行生成器后复制粘贴yo famous）

于 2014-04-14T12:46:16.693 回答