Ionic4 scrollToBottom不起作用

Question

我正在跟随https://www.joshmorony.com/automatic-scroll-to-bottom-chat-interface-with-mutation-observers-in-ionic/尝试滚动，但没有任何效果。

我还没有使用可变的可观察部分。根据帖子，在某些情况下，应该只跳过滚动中的最后一条消息。但在我的例子中，滚动根本不会发生。我已经检查了控制台，也没有错误

我的代码如下所示：

<ion-content fullscreen>
<div class="full-screen-bg">
    <div style="border-top: 1px solid #5b63f8">
            <ion-segment (ionChange)="segmentChanged($event)" mode="md" style="padding-top:15px;padding-bottom: 0px" value="feed">
                    <ion-segment-button value="feed">
                      FEED
                    </ion-segment-button>
                    <ion-segment-button value="explore">
                      EXPLORE
                    </ion-segment-button>
            </ion-segment>

            <div [ngSwitch]="eventTab">
                <div *ngSwitchCase="'feed'" >
                    <ion-list *ngIf="messages" lines="full" style="background:transparent" #content>
                    <ion-item  style="padding-top:10px;" *ngFor="let msg of messages | async;let last = last ">
                        <ion-row  style="width:100%;">
                            <ion-col size="3">
                                <ion-row>
                                    <ion-col class="sg-reg-text">{{formatName(msg.name)}}</ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col style="padding:0;padding-left:8px" class="sg-tiny-text"><ion-icon name="time" color="light"></ion-icon>&nbsp;{{timeSince(msg.date)}}</ion-col>
                                </ion-row>
                            </ion-col>
                            <ion-col style="border-bottom: 1px solid #7e7c8d;padding-bottom: 10px">
                                <ion-row>
                                    <ion-col class="sg-reg-text">{{msg.message}}</ion-col>
                                </ion-row>
                            </ion-col>
                        </ion-row>

                    </ion-item>
              </ion-list>
            </div>
            <div *ngSwitchCase="'explore'" style="padding:40px">
</ion-content>

.ts文件

 @ViewChild(Content) contentArea: Content; 

  messages:Observable<Post[]>

send(){
console.log("posting:" + this.message)

if(this.message == undefined || this.message.trim() == '')
  return

var post = new Post(this.core.name, this.message, this.core.uid, (new Date()).getTime())

this.sgSvc.postMessage(post).then(
  (rsp) =>  {
              console.log('success')
              this.message = ''
              this.scrollToBottom();

  }
)
  }

scrollToBottom() {
  setTimeout(() => {
if (this.contentArea.scrollToBottom) {
  this.contentArea.scrollToBottom();
}
  }, 400);
}

Answer 1

我可以用这个解决这个问题

this.contentArea.el.scrollToBottom();

我希望它能帮上忙

Answer 2

你的大部分代码都是好的。在Ionic 4中，你只需要做3次更改，这对你来说应该是有效的。我用Ionic 4测试了你的代码，它对我很有效。以下是更改：

更改1 (TS文件)：

import {IonContent} from '@ionic/angular';

更改2 (TS文件)：

替换

@ViewChild(Content) contentArea: Content;

通过以下方式：

@ViewChild(IonContent) contentArea: IonContent;

HTML 3(文件)：

替换：

<ion-content fullscreen>

通过以下方式：

<ion-content fullscreen #contentArea>

Answer 3

代替this.contentArea.scrollToBottom();

使用window.scrollTo(0,document.body.scrollHeight);