Famo.us Scrollview的高度 [英] Famo.us Scrollview height

问题描述

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

I am trying to add a image below a scrollview using the famous sequentialLayout and im having a problem with the scrollview's height.

这就是我创建scrollview的方法。

This is how i create my scrollview.

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

当我向250度高的scrollview添加曲面时，scrollview的父DOM容器（着名组）包含这些曲面的宽度和高度为0.

When i add surfaces to the scrollview with 250 height, the scrollview's parent DOM container (famous-group) containing these surfaces has a width and height of 0.

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

When adding this scrollview within a sequentialLayout as the first item, the second item or surface with a height is displayed on top of this scrollview since it has no height.

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

Any ideas how to fix this using Famo.us?

推荐答案

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

You can't set size like that - use a modifier for this.

这将是渲染树

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

这是示例要点（在运行 yo着名的生成器后复制粘贴 main.js ）

And here is an example gist (copy-paste the main.js after running the yo famous generator)

这篇关于Famo.us Scrollview的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！