Paper-Tabs 选择栏未显示答案

【问题标题】：Paper-Tabs selection bar not showingPaper-Tabs 选择栏未显示
【发布时间】：2015-08-18 17:39:09
【问题描述】：

我已在纸张滚动标题面板中放置了一个纸张标签元素

但是，选择栏似乎无法正常工作。默认情况下它不会显示，但是当我出现时

导航到其他页面，然后返回首页或
更改我的 chrome 窗口的尺寸

选择栏回来了

我已经为此寻找解决方案，并发现了一些关于 updateBar() 的内容，该函数位于纸张标签的定义中，当您需要刷新视图时必须调用该函数。 p>

即便如此，我还是无法从页面布局元素触发此功能

请帮帮我...

<dom-module id="page-layout">
     <link rel="stylesheet" href="styles.css">
     <link rel="import" href="imports.html">
     <link rel="import" href="page-content.html">
     <template>
         <paper-scroll-header-panel condenses keepCondensedHeader>
            <paper-toolbar class="tall">
                <span class="flex"></span>
                <paper-icon-button icon="refresh" 
                    onclick='location.reload()'>
                </paper-icon-button>
                <paper-icon-button icon="search"></paper-icon-button>
                <div class="middle titleHead" >TMess</div>
                <span class="flex bottom"></span>
                <!--Navigation-->
                <paper-tabs id="tabs" class="bottom" 
                            selected="0" noink noBar> 
                    <paper-tab>
                        <iron-icon icon="home" class="tabs"></iron-icon>
                        <span class="tabtext">Home</span>
                    </paper-tab>
                    <paper-tab>
                        <iron-icon icon="event" class="tabs"></iron-icon>
                        <span class="tabtext">Events</span>
                    </paper-tab>
                    <paper-tab>
                        <iron-icon icon="drafts" class="tabs"></iron-icon>
                        <span class="tabtext">Suggest</span>
                    </paper-tab>
                    <paper-tab>
                        <iron-icon icon="account-box" class="tabs">
                        </iron-icon>
                        <span class="tabtext">About Us</span>
                   </paper-tab>             
                </paper-tabs>
            </paper-toolbar>
            <div class="content">
                <page-content size="100"></page-content>
            </div>
        </paper-scroll-header-panel>
     </template>
</dom-module>
<script>
  Polymer({
      is: 'page-layout'
  });
</script>
<script>
    window.onload = function(){
        setNavigation();

    };
    function setNavigation(){
        var tabs = document.querySelector('#tabs');
        var content = document.getElementsByTagName('page-content')[0];
        var pages = content.getElementsByTagName('iron-pages')[0];
        tabs.addEventListener('iron-select', function(){
            pages.selected = tabs.selected;
        });
    }
</script>

【问题讨论】：

我无法从您的问题中看出您是要始终显示还是隐藏栏。如果您想隐藏它，您需要将noBar 更改为no-bar。如果你想显示它，你显然应该删除noBar，但是我也有一个问题，它直到窗口调整大小或单击选项卡才显示。
“无酒吧”属性从何而来？它是无证的，不在 Polymer 网站上......但它有效！

标签： html layout tabs navigation polymer

【解决方案1】：

我有一个技巧可以帮助你： tabs._onResize(); 这显示了 Polymer 1.1 中的选择栏，但我认为这不是一个好习惯，您可能应该在他们的存储库中提交错误。

【讨论】：