Question

我有一个简单的移动应用程序，我正在整理。我试图了解着名表面的来源，因为我认为当我尝试将元素放在右上角时会引起问题。（但是现在让我们坚持这个神秘的表面）

以下code：

var mainContext = Engine.createContext()
var surface = new ContainerSurface
mainContext.add(surface)

元素结构中的结果：

<body class=" hasGoogleVoiceExt famous-root">
<div class="famous-container" style="perspective: 1000px; -webkit-perspective: 1000;">
    <div class="famous-surface"
         style="width: 1366px; height: 0px; opacity: 0.999999; -webkit-transform-origin: 0% 0%; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
        <div class="famous-group famous-container-group"></div>
    </div>
</div>
</body>

那里＆lt; div class =＆＃34; famous-surface＆＃34;＆gt; ...＆lt; / div＆gt;来自？
我特别关注的是，身高被列为＆＃39; 0px＆＃39;。

谢谢，

JD

Answer 1

没有什么＆＃34;神秘的＆＃34;关于这个DOM元素。 famous-surface正是班级所暗示的。当您Surface到上下文时，该元素是您的代码创建的着名.add(surface)。这个恰好是ContainerSurface，因此在通过向其添加元素创建group之前，它不会调整大小。

var mainContext = Engine.createContext(); 
var surface = new ContainerSurface();
mainContext.add(surface);

解释

您创建了一个上下文＆＃34; famous-container＆＃34;在上面的第一行。第二行创建容器对象，但仍未添加到上下文中。第三行在视图中创建容器，并将DOM元素添加为context元素的子元素。

尺寸：您没有在曲面上添加尺寸，因此默认高度保持0px。你的宽度来自undefined值（默认值），它告诉famo.us将宽度作为它的父宽度，在这种情况下是上下文。

<强> Try this code:

var Engine = require('famous/core/Engine');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();
var cSurface = new ContainerSurface({
    properties: {
        backgroundColor: 'rgba(0, 0, 0, 0.25)'
    }
});
var surface = new Surface({
    size: [200, 200],
    content: 'I am 200x200',
    properties: {
        backgroundColor: 'rgba(255, 0, 0, 0.25)'
    }
});

cSurface.add(surface);
mainContext.add(cSurface);

然后，您会看到您的容器表面（灰色）是用它的孩子famous-group和孩子famous-surface（粉红色）创建的。

着名容器下的神秘名表

1 个答案:

解释