javascript - 垂直 ionic 滚动未正确实现为页脚按钮覆盖列表组件

Question

我在 Ionic 移动应用程序的一个屏幕上设置 ion-scroll 时遇到了一些问题。在我的应用程序的 Book 页面上，我遇到了两个问题:

1) Confirm 按钮与列表组件的集成不是很好。我希望它保持固定在底部，但与此同时，我希望列表以某种方式适合它。我不确定如何执行此操作，希望在这方面得到一些指导。

2) 列表似乎根本不想滚动，所以我在用于测试的 iPhone4 上看不到“Winter Check” 之外的任何列表项。还有一个元素，“同步带”，它是看不见的。

有没有人对我如何使垂直滚动在此屏幕上正常工作有任何建议？我在这个屏幕上的代码如下:

<ion-view view-title="Book">
  <ion-content>
    <div class="list">
      <div class="item item-input-inset" style="background-color: #2784c9; border-top: 0px">
        <label class="item-input-wrapper">
          <input type="text" placeholder="What service are you after?" style="width: 100%;" ng-click="showBookingForm=true; showServiceList=true">
        </label>
        <button class="button button-positive button-small" ng-click="showBookingForm=false; showServiceList=false"><i class="ion-close"></i></button>
      </div>

      <!-- Date, time, number of people attending -->
      <div ng-hide="showBookingForm">
        <label class="item item-input">
          <input type="text" placeholder="Date">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Time">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Number of people attending">
        </label>
      </div>

      <!-- List of services -->
      <ion-scroll direction="y">
        <div ng-show="showServiceList">
          <ul class="list">
            <li class="item" style="line-height: 16px; padding-top: 13px; font-size: 14px;" ng-repeat="service in businessServiceList">
              <p>{{service.title}}</p>
            </li>
            <li class="item" style="line-height: 16px; padding-top: 13px; font-size: 14px;" ng-repeat="service in businessServiceList">
              <p>{{service.title}}</p>
            </li>
          </ul>
        </div>
        </<ion-scroll>
    </div>
  </ion-content>

  <div style="position: absolute; bottom: 0px; width: 100%;">
    <div class="row">
      <div class="col">
        <a href="#/app/confirm/1/1" class="button button-full button-balanced" style="margin-bottom: 0px">Confirm</a>
      </div>
    </div>
  </div>
</ion-view>

我在这里创建了一个 CodePen:http://codepen.io/anon/pen/WrMEpO .只需单击 What service are you after? 文本字段即可查看列表。

Answer 1

使用ion-footer-bar这个工作很棒 ;)