ios - Ionic & ios 如何制作固定的顶部栏按钮和可滚动列表

Question

在带有 ios 平台的 ionic 中，我想要以下 View :

• 标题
• 一个固定的条形按钮
• 可滚动列表

所以我试着做:

<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 之后添加一个吗？

Answer 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;