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

您的大多数代码都可以。您只需要在Ionic 4中进行3项更改，就可以为您工作。在Ionic 4中，我尝试了您的代码，并且对Ionic 4起作用。这是更改：

更改1（TS文件）：

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

更改2（TS FILE）：

替换

@ViewChild(Content) contentArea: Content;

具有：

@ViewChild(IonContent) contentArea: IonContent;

更改3（HTML文件）：

替换：

<ion-content fullscreen>

具有：

<ion-content fullscreen #contentArea>

Answer 2

代替this.contentArea.scrollToBottom();

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

Answer 3

我能够通过使用

解决它

this.contentArea.el.scrollToBottom();

我希望对您有帮助

Ionic4 scrollToBottom无效

3 个答案: