Question

我正在使用famo.us的HeaderFooterLayout。我的要求是，将视图底部与HeaderFooterLayout中的内容视图对齐。但是，元素，而不是捕捉到内容区域的底部，它与页脚重叠。如果我将其捕捉到内容区域的顶部边缘，它可以正常工作。

我也可以在famo.us教程代码中产生这个问题。替换代码 @ http://www.famo.us/university/famous-102/layout/2/ 使用以下代码。你可以看到表面只是位于页脚后面。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var HeaderFooterLayout = require("famous/views/HeaderFooterLayout");
var View = require('famous/core/View');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout({
  headerSize: 100,
  footerSize: 50
});

layout.header.add(new Surface({
  content: "Header",
  classes: ["red-bg"],
  properties: {
    lineHeight: "100px",
    textAlign: "center"
  }
}));

var contentView = new View();
var contentSurface = new Surface({
  content: "Content",
  classes: ["grey-bg"],
  properties: {
    textAlign: "center"
  }
});
var contentModifier = new StateModifier({
  size: [200, true],
  origin: [0.5, 1],
  align: [0.5, 1]
});

contentView.add(contentModifier).add(contentSurface);
var contentViewModifier = new StateModifier({
  size: [undefined, undefined],
});
layout.content.add(contentViewModifier).add(contentView);

/*layout.content.add(new Surface({
  content: "Content",
  classes: ["grey-bg"],
  properties: {
    lineHeight: '400px',
    textAlign: "center"
  }
}));*/

layout.footer.add(new Surface({
    content: "Footer",
    classes: ["red-bg"],
    properties: {
        lineHeight: "50px",
        textAlign: "center"
    }
}));

mainContext.add(layout);

将第33和34行更改为以下代码。

origin: [0.5, 0],
align: [0.5, 0]

现在，我们可以看到元素捕捉到内容视图的中心顶部。

Answer 1

目前使用true-sizing会出现一些问题。一些问题已得到解决，其他问题仍在解决中。在您的情况下，修饰符为高度返回值true，HeaderFooterLayout不知道如何处理它。

要解决此问题，我使用Surface的部署事件在部署contentSurface时收到通知。然后我以实际像素设置修改器的大小。

这是您可以在定义contentSurface或contentModifier后立即插入的调用..

contentSurface.on('deploy',function(){
    var height = contentSurface._currTarget.offsetHeight;
    contentModifier.setSize([200,height]);
});

现在，您的内容表面的大小和位置正确！

希望这有帮助！

famo.us - HeaderFooterLayout - 内容中的底部中心对齐元素位于页脚后方/上方

1 个答案: