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

Question

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

我正在尝试结合 onsen-ui 框架中的块来创建一个固定的 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

希望对您有所帮助！

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

Onsen-UI Action buttons inside ons-bottom-toolbar

html

css

angularjs

cordova

onsen-ui