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

Posted 2023-03-13

【中文标题】添加新消息时聊天应用程序不滚动

【英文标题】：Chat app not scrolling when new messages added

【发布时间】：2020-01-21 22:56:36

【问题描述】：

我使用 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

【问题讨论】：

我复制了你的代码，它运行良好。它正在滚动。如果你想在发送消息后滚动，你可以在 ion-content 参考上使用 scrollToBottom()

【参考方案1】：

您可以添加溢出或包装div，另外您可以添加一个样式表，由溢出实现：自动和宽度：100％或高度：； if 是水平的还是垂直的；

https://angular.io/api/animations/style

  style( display: "flex", flex-wrap: "wrap", overflow: "auto" )

【讨论】：

我根据您的建议添加了 .css，但我不确定我是否正确

也试过这个： 无济于事

尝试溢出：滚动；

添加了屏幕截图。将溢出滚动添加到 ?你认为问题在于我使用的是 ion-grid 吗？

用离子列表修复

【参考方案2】：

我通过将 ion-grid 替换为 ion-list 来解决此问题。

<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>