angularjs - ons-bottom-toolbar 内的 Onsen-UI 操作按钮

Question

我需要几天来一直在努力解决的以下问题。

我正在尝试结合 onsen-ui 框架中的 block 来创建一个固定的 footbar，该 footbar 将具有带有图标和文本的操作按钮，而不会在其中加载其他页面的内容，就像我在

    <ons-list-item style="text-align:center;padding-top:4px;"modifier="action-buttons">
        <ons-row  class="action">
          <ons-col class="action-col"> 
            <div class="action-icon">
              <ons-icon icon="ion-ios-calendar-outline"></ons-icon></div>
            <div class="action-label">Check Now</div>
          </ons-col>
          ....

        </ons-row>
    </ons-list-item>
  </ons-list>

http://codepen.io/Cadmos/pen/BybqpR/

这里的问题是它不是固定的页脚，直到您到达页面内容的底部才会显示。

我试图结合使用 ons-bottom-toolbar 来模拟不同的版本，它用于固定页脚但没有成功，因为它没有在图标下方显示任何文本并且它在其中加载了其他页面的内容(我不想要)

<ons-bottom-toolbar>
    <div class="tab-bar">
      <label ng-click="menu.setMainPage('home.html')" class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
             <button class="tab-bar__button">
               <ons-icon icon="fa-twitter" fixed-width="true"></ons-icon>Home
             </button>
      </label>
      ......
    </div>
  </ons-bottom-toolbar>

http://codepen.io/Cadmos/pen/JozmEQ/

此外，当加载其他页面的内容时，它还会导致左上方的滑动菜单显示两次。

ons-bottom-toolbar 的纯格式非常适合我想要的，但它应该只存在于母版页内显示其他页面的不同内容(我不想要这个)，这也使菜单工具栏存在时加载两次

Answer 1

在上一个示例中，您将 CSS 用于标签栏，而不是底部工具栏。工具栏应该在 <ons-page> 里面.如果您使用 <ons-bottom-toolbar>它运作良好，你只需要改变高度。我想你认为它不显示名字是因为......名字落在屏幕之外(工具栏不够大)。你可以使用这个 CSS:

.bottom-toolbar {
 height: 95px;
}

现在我们要改变页面内容的大小，否则底部的固定项会覆盖部分内容:

.page__bottom-bar-fill ~ .page__content {
 bottom: 95px;
}

在这里查看:http://codepen.io/frankdiox/pen/myoggy

希望对您有所帮助!