Question

我最近开始使用Famo.us框架，并尝试构建一个简单的HeaderFooterLayout，以便在不同的Scrollviews之间切换。

我遇到的问题是页面加载时我们可以看到底部TabBar前面的Scrollview传递。

另一个奇怪的事情是这个问题发生一次。

实际上它并不是一个TabBar小部件，而是一个GridLayout，我推动Surfaces作为按钮。

我知道使用Famo.us，实例化Surfaces的顺序会影响z-index，但我已经验证了这一点。

我肯定误解了RenderTree的用法，但我无法弄清楚是什么。

这是我的代码：

define(function(require, exports, module) {
    var Engine             = require("famous/core/Engine");
    var RenderNode         = require('famous/core/RenderNode');
    var Surface            = require("famous/core/Surface");
    var ViewSequence       = require("famous/core/ViewSequence");
    var StateModifier      = require('famous/modifiers/StateModifier');
    var Utility            = require("famous/utilities/Utility");
    var EdgeSwapper        = require("famous/views/EdgeSwapper");
    var GridLayout         = require("famous/views/GridLayout");
    var HeaderFooterLayout = require("famous/views/HeaderFooterLayout");
    var Scrollview         = require("famous/views/Scrollview");
    var NavigationBar      = require("famous/widgets/NavigationBar");
    var TabBar             = require("famous/widgets/TabBar");
    var ToggleButton       = require("famous/widgets/ToggleButton");

    var mainContext = Engine.createContext();

    var layout = new HeaderFooterLayout({ headerSize: 50, footerSize: 50 });
    var edgeswapper = new EdgeSwapper({
        options: {
            size: [undefined, window.innerHeight - 100]
        }
    });

    var homeScrollview = new Scrollview();
    var bookmarksScrollview = new Scrollview();
    var messagesScrollview = new Scrollview();
    var profileScrollview = new Scrollview();

    var homeScrollviewSurfaces = [];
    homeScrollview.sequenceFrom(homeScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(homeScrollview);
        homeScrollviewSurfaces.push(temp);
    }

    var bookmarksScrollviewSurfaces = [];
    bookmarksScrollview.sequenceFrom(bookmarksScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(bookmarksScrollview);
        bookmarksScrollviewSurfaces.push(temp);
    }

    var messagesScrollviewSurfaces = [];
    messagesScrollview.sequenceFrom(messagesScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(messagesScrollview);
        messagesScrollviewSurfaces.push(temp);
    }

    var profileScrollviewSurfaces = [];
    profileScrollview.sequenceFrom(profileScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(profileScrollview);
        profileScrollviewSurfaces.push(temp);
    }

    var navigationBar = new NavigationBar({
        size: [undefined, layout.headerSize],
        backClasses: ["back"],
        backContent: "",
        classes: ["navbar"],
        content: 'NavigationBar',
        moreClasses: ["more"],
        moreContent: ""
    });

    var tabBar = new GridLayout({
        dimensions: [4, 1],
        cellSize: [undefined, 50],
        transition: false
    });

    var homeButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-leaf"></div>'+
                '</span>'+
                '<span class="tabbar-title">Home</span>'
    });
    var bookmarksButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-heart"></div>'+
                '</span>'+
                '<span class="tabbar-title">Bookmarks</span>'
    });
    var messagesButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-envelope"></div>'+
                '</span>'+
                '<span class="tabbar-title">Messages</span>'
    });
    var profileButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-user"></div>'+
                '</span>'+
                '<span class="tabbar-title">Profile</span>'
    });

    tabBar.sequenceFrom([
        homeButton,
        bookmarksButton,
        messagesButton,
        profileButton
    ]);

    layout.content.add(edgeswapper);
    layout.header.add(navigationBar);
    layout.footer.add(tabBar);

    edgeswapper.show(homeScrollview);

    homeButton.on("click", function() { edgeswapper.show(homeScrollview); });
    bookmarksButton.on("click", function() { edgeswapper.show(bookmarksScrollview); });
    messagesButton.on("click", function() { edgeswapper.show(messagesScrollview); });
    profileButton.on("click", function() { edgeswapper.show(profileScrollview); });

    mainContext.add(layout);
});

Answer 1

发生的事情是，对于未显示的其他滚动视图，尚未创建与其Surface相关联的DOM元素，但标签栏已经创建。然后，当您显示其他Scrollviews时，将创建新的DOM元素，默认情况下在DOM中，当DOM元素具有相同的CSS zIndex和相同的z-transform时，较新的DOM元素将在顶部分层。要解决此问题，请尝试向标签栏添加修改器，以便在Z空间中显式转换页脚。

试试这个：

layout.footer.add(new Modifier({
    transform: Transform.translate(0, 0, 1)
})).add(tabBar);

使用默认DOM分层变得非常毛茸茸，因此了解如何以及何时使用z翻译或css zIndex明确地进行分层通常很有用。

如何在转换时修复scrollviews高度

1 个答案: