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

Question

我需要几天来试图解决的问题。

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

    <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

希望对你有帮助！