Question

我在下面需要帮助，我试图解决好几天。

我正在尝试将块组合在onsen-ui框架上，以创建一个固定的脚踏板，下面会有带有图标和文本的动作按钮，而不会加载其他页面＆＃39;里面的内容，就像我在

中创建的那样

    <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

在上一个示例中，您使用的是tab for tabbar，而不是bottom-toolbar。工具栏应位于<ons-page>内。如果你使用<ons-bottom-toolbar>它运作良好，你只需要改变高度。我认为你认为它没有显示名称，因为...名称落在屏幕之外（工具栏不够大）。你可以使用这个CSS：

.bottom-toolbar {
 height: 95px;
}

现在我们必须更改页面内容的大小，或者底部的固定项目将覆盖部分内容：

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

在此处查看：http://codepen.io/frankdiox/pen/myoggy

希望它有所帮助！

ons-bottom-toolbar内的Onsen-UI Action按钮

1 个答案: