我正在尝试使用著名的 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 中添加此 ScrollView 作为第一项时,具有高度的第二项或表面显示在此 ScrollView 的顶部,因为它没有高度。
关于如何使用 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]);
这是一个 example gist (运行 yo famous
生成器后复制粘贴 main.js
)
关于javascript - Famo.us ScrollView 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23057349/