0

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

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

另一个奇怪的是，这个问题出现一次两次。

事实上，它并不是一个真正的 TabBar 小部件，而是一个 GridLayout，我在其中推送将充当按钮的 Surfaces。

我知道 Famo.us 实例化 Surface 的顺序会影响 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);
});
4

1 回答 1

1

发生的情况是，对于其他未显示的滚动视图，与其 Surface 关联的 DOM 元素尚未创建，但标签栏已创建。然后，当您显示其他 Scrollview 时，会创建新的 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 显式进行分层通常很有用。

于 2014-05-19T17:19:42.497 回答