Famo.us滚动视图高度

Famo.us Scrollview height

本文关键字:高度 视图 滚动 us Famo      更新时间:2023-09-26

我正试图使用著名的sequentialLayout在滚动视图下面添加一个图像,但我对滚动视图的高度有问题。

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

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

当我将高度为250的曲面添加到滚动视图时,包含这些曲面的滚动视图的父DOM容器(著名组)的宽度和高度都为0。

当在序列布局中添加此滚动视图作为第一个项目时,具有高度的第二个项目或曲面会显示在此滚动视图的顶部,因为它没有高度。

有什么想法可以使用Famo.us解决这个问题吗?

不能这样设置大小-请使用修饰符。

这将是渲染树

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 famous生成器后复制粘贴main.js