Ionic & ios 如何制作固定顶栏按钮和可滚动列表答案

【问题标题】：Ionic & ios how to make fixed top bar button and scrollable listIonic & ios 如何制作固定顶栏按钮和可滚动列表
【发布时间】：2016-04-24 06:04:52
【问题描述】：

在带有 ios 平台的 ionic 中，我想要以下视图：

标题
固定条形按钮
可滚动列表

所以我试着做：

<ion-view view-title="Account">
   <div class="button-bar" style="margin-top:66px;">
        <a class="button">Item 1</a>
        <a class="button">Item 2</a>
        <a class="button">Item 2</a>
    </div>
 ...

当我制作 ionic emulate ios 时，在 iphone 模拟器中我看不到栏按钮（我认为是因为它位于标题栏后面）

所以我添加了一个margin-top：

<div class="button-bar" style="margin-top:44px;">

现在我看到了，但标题栏的一部分始终位于栏按钮的顶部。是因为状态栏吗？ ios设备上状态栏+标题栏的高度是多少？

要制作可滚动列表（仅可滚动列表），我必须在按钮栏 div 之后添加一个？

【问题讨论】：

标签： ios css ionic-framework

【解决方案1】：

HTML

<div class="button-bar" style="margin-top:66px;">
    <a class="button">Item 1</a>
    <a class="button">Item 2</a>
    <a class="button">Item 3</a>
</div>

CSS

.button-bar
    {
      float:left;
      overflow-Y:scroll;
      height:50px; 
      width:150px;
    }
.button
    {
      float:left;
      width:100%;
    }

查看此Fiddle 并尝试滚动您的项目。 :)

为了让一切都变得清晰和直观，请对您的每个元素进行float:left; 和display:block;

【讨论】：