垂直離子滾動未正確實現為頁腳按鈕覆蓋列表組件

Question

我在Ionic移動應用程序的一個屏幕上設置離子滾動時遇到了一些問題。 在應用程序的“書籍”頁面上，我遇到兩個問題：

1）“ 確認”按鈕與列表組件的集成不是很好。 我希望它固定在底部，但與此同時，我希望列表以某種方式適合它。 我不確定如何執行此操作，希望在此方面提供一些指導。

2）該列表似乎根本不需要滾動，因此我無法在用於測試的iPhone4上看到“ Winter Check”以外的任何列表項。 還有一個項目“ Timing Belts”（看不見）。

有人對我如何在此屏幕上正常運行垂直滾動有任何建議嗎？ 我在此屏幕上的代碼如下：

<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這項工作很棒;）