时间戳

首页 > 解决方案 > 添加新消息时聊天应用程序不滚动

html - 添加新消息时聊天应用程序不滚动

问题描述

在此处输入图像描述我使用 Ionic 4 和 Firebase 创建了一个聊天应用程序。但是，它没有滚动，因此我无法添加更多消息。

这是html：

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let message of messages.message">
      <ion-col size="9" *ngIf="myItinerary.userId !== message.userId" class="message other-user">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
      </ion-col>

      <ion-col offset="3" size="9" *ngIf="myItinerary.userId === message.userId" class="message me">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer>
  <ion-toolbar light="light">
    <ion-row align-items-center no-padding>
      <ion-col size="10">
        <textarea autosize maxRows="3" [(ngModel)]="newMsg" class="message-input"></textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="newMsg === ''" class="msg-btn"
        (click)="sendMessage()">
        <ion-icon name="ios-send" slot="icon-only"></ion-icon>
      </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

这是我找到的示例，它可以工作...我可以添加消息，但它不会滚动。我没有收到错误

我正在根据海报的建议添加 .css ......它也不起作用，但我可能没有正确执行它。

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

.other-user{
    background: var(--ion-color-tertiary);
    color: #fff;
}

.me{
    background: var(--ion-color-secondary);
    color: #fff;
}

.time{
    color: #dfdfdf;
    float: right;
    font-size: small;
}

.message-input {
    width: 100%;
    border: 1px solid var(--ion-color-medium);
    border-radius: 10px;
    background: #fff;
    resize: none;
    padding-left: 10px;
    padding-right: 10px;
}

.msg-btn {
    --padding-start: 0.5em;
    --padding-end: 0.5em;
}

.style{
    display: "flex";
    flex-wrap: "wrap";
    overflow: "auto";
}

每添加 css

标签： htmlangulartypescriptfirebaseionic4

解决方案

我通过用 ion-list 替换 ion-grid 来解决这个问题。 

<ion-content>
  <ion-list lines="none">
    <ion-item *ngFor="let message of messages.message">
      <div size="9" *ngIf="myItinerary.userId !== message.userId" class="message other-user">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
        </div>

      <div offset="3" size="9" *ngIf="myItinerary.userId === message.userId" class="message me" slot="end">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
        </div>
    </ion-item>
  </ion-list>
</ion-content>

推荐阅读