Famo.us Scrollview的高度

Question

我正在尝试使用着名的sequentialLayout在scrollview下面添加一个图像,并且我对scrollview的高度有问题.

这是我创建我的scrollview的方式.

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

当我向250度高的scrollview添加曲面时,包含这些曲面的scrollview的父DOM容器(famous-group)的宽度和高度为0.

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

有任何想法如何使用Famo.us解决这个问题？

Answer 1

你不能设置这样的大小 - 为此使用修饰符.

这将是渲染树

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生成器后复制粘贴)