在焦点上离子输入不会随虚拟键盘向上滑动。

Question

chat.html

<ion-view view-title="{{vm.headetTilte}}" hide-back-button="true" class="purple-back watermark-addComp comment">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-android-arrow-back sidebar-ion-navicon" ng-click="vm.goBack()"></button>
  </ion-nav-buttons>
  <ion-content class="padding commentListMarginBottom">
    <ion-list id="commentEmpty" ng-show="vm.comments.length===0" class="teacher-complaint-list">
      <ion-item id="cmplEmpty">
        <h3>Dummy content</h3>
      </ion-item>
    </ion-list>
  </ion-content>
  <div class="commentForm">
    <form name="commentForm" class="row" ng-submit="vm.addComment(vm.teacher)">
      <div class="row" style="margin-top:-10px !important">
        <div class="col col-90">
          <textarea id="comment-textarea" row="5" ng-model="vm.teacher.comment" placeholder="Type a comment..." required></textarea>
        </div>
        <div class="col commentBtn">
          <button type="submit" id="send" class="button button-icon icon-left ion-android-send"></button>
        </div>
      </div>
    </form>
  </div>
</ion-view>

样式

.commentForm {
    background-color: $btn-bg-color;
    height: 12%;
    width:100%;
    position: fixed;
    bottom: 0;
    textarea {
        resize: none;
        margin-top: 2px;
        position: absolute;
        width: $width - 20%;
        height: $height - 20%;
        color: $color-white;
        background-color: $transparent;
    }
    .commentBtn {
        top: 50%;
        margin-top:0;
        height: $height;
        position: absolute;
        transform: translateY(-50%);
        button {
            top: 50%;
            position: relative;
            color: $color-white;
            transform: translateY(-50%);
            color: $btn-bg-color;
        }
    }
}

以上是我的离子应用程序的代码。页脚部分粘在底部，其中的形状不会随虚拟键盘向上滑动。 这个代码在Android设备上工作正常，问题只与ios设备有关。 请发送自过去2天以来我被困在其中的解决方案。

Answer 1

<ion-view view-title="{{vm.headetTilte}}" hide-back-button="true" class="purple-back watermark-addComp comment">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-android-arrow-back sidebar-ion-navicon" ng-click="vm.goBack()"></button>
  </ion-nav-buttons>
  <ion-content class="padding commentListMarginBottom">
    <ion-list id="commentEmpty" ng-show="vm.comments.length===0" class="teacher-complaint-list">
      <ion-item id="cmplEmpty">
        <h3>Dummy content</h3>
      </ion-item>
    </ion-list>
<div class="commentForm">
    <form name="commentForm" class="row" ng-submit="vm.addComment(vm.teacher)">
      <div class="row" style="margin-top:-10px !important">
        <div class="col col-90">
          <textarea id="comment-textarea" row="5" ng-model="vm.teacher.comment" placeholder="Type a comment..." required></textarea>
        </div>
        <div class="col commentBtn">
          <button type="submit" id="send" class="button button-icon icon-left ion-android-send"></button>
        </div>
      </div>
    </form>
  </div>
  </ion-content>
</ion-view>

上面的代码已经解决了虚拟键盘的问题，但我仍然无法将其粘在底部。