Question

我正在使用 ionic 5 和 typescript 编写一个聊天应用程序，但是当我打开键盘时，页脚被隐藏了，正如你在视频中看到的那样，我不知道我应该改变什么我尝试了很多东西，但我还没有修复它

这是我的代码：

   <ion-header>
         ...
        </ion-header>
        
        <ion-content class="messages-container" #content class="ion-padding">
        
         
        
       ...
        
        
        </ion-content>
    
<ion-footer>
  <ion-toolbar color="light">
    <ion-row class="ion-align-items-center">
      <ion-col size="10">
        <ion-textarea placeholder="Votre message" autoGrow="true" class="message-input" rows="1" maxLength="500"
          [(ngModel)]="newMsg">
        </ion-textarea>

      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="newMsg === ''" class="msg-btn"
          (click)="addChatMessage()">
          <ion-icon name="send" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

和 css 部分

.message-input {
  width: 100%;
  border: 1px solid var(--ion-color-medium);
  border-radius: 41px;
  background: #fff;
  resize: none;
  margin-top: 0px;
  --padding-start: 9px;
}

.message {
  padding: 10px !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  white-space: pre-wrap;
}

.my-message {
  --background: #af18dd;
  color: #fff;
  text-align: right;
  margin-left: 100px;
  padding: 10px !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  white-space: pre-wrap;
}

.other-message {
  --background: #18ddc3;
  color: #fff;
  margin-right: 100px;
  padding: 10px !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  white-space: pre-wrap;
}


.time {
  color: #dfdfdf;
  float: right;
  font-size: small;
}
.messages-container {
  min-height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
}
img {
  border: 0;
  width: 16%;
  border-radius: 30px;
}

先谢谢你;)

Answer 1

您的代码运行良好，我已经在我的设备中检查过，现在如果您使用 statusbar overlay true 那么您需要从您的组件中删除该代码。

如果您使用电容器，请删除以下代码。

StatusBar.setOverlaysWebView({
  overlay: true //make this overlay:false and try again
});

如果你使用cordova然后在下面编辑

this.statusBar.overlaysWebView(true); //remove this line or make it false

或

通过'config.xml'文件中的首选项使状态栏覆盖为false

    <preference name="StatusBarOverlaysWebView" value="false" />

Statusbar overlay true 会将您的设备屏幕硬编码为全屏，因此无论何时我们打开键盘，它都不会动态调整屏幕大小。

当我点击 textarea 时，键盘会隐藏我的页脚

1 个答案:

或