Ionic 4 离子含量滚动到底部 [英] Ionic 4 ion-content scroll to bottom

问题描述

我正在使用 Ionic 4 创建一个聊天页面，我试图让它自动滚动到页面底部.我是这样做的，但它不起作用:

I am creating a chat page using Ionic 4 and I'm trying to make it automatically scroll to the bottom of the page. I did it like this and it's not working:

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

export class ChatroomPage implements OnInit {
    messageForm: FormGroup;
    messages: any[];
    messenger: any;
    @ViewChild(IonContent) content: IonContent;

    constructor(
        private navExtras: NavExtrasService,
        private api: RestApiService,
        private httpNative: HTTP
    ) { }

    ngOnInit() {
        this.content.scrollToBottom(300);
    }
}

在html文件中:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Chatroom</ion-title>
            </ion-toolbar>
        </ion-header>

        <!-- display previous message -->
        <ion-content padding id="content"> 

        <ion-list>
            <ion-item *ngFor="let message of messages">
                {{ message.message }}
            </ion-item>
        </ion-list>

        </ion-content>

    <!-- chat message input -->
    <ion-footer>
        <form [formGroup]="messageForm" (submit)="sendMessage()" (keydown.enter)="sendMessage()">
            <ion-input formControlName="message" type="text" placeholder="Enter your message"></ion-input>
            <ion-button type="submit">Send</ion-button>
        </form>
    </ion-footer>

显示的错误是:

ng:///ChatroomPageModule/ChatroomPage_Host.ngfactory.js:5 错误类型错误:无法读取未定义的属性scrollToBottom"

ng:///ChatroomPageModule/ChatroomPage_Host.ngfactory.js:5 ERROR TypeError: Cannot read property 'scrollToBottom' of undefined

请告诉我我做错了什么.我发现的大多数教程都使用 Ionic 3，它们使用 ionic-angular 中的 Content 而不是 @ionic/angular 中的 IonContent代码>.我似乎无法在 Ionic 4 中使用 Content，因为它没有 scrollToBottom 方法.

Please enlighten me what did I do wrong. Most tutorials I found are using Ionic 3 and they use Content from ionic-angular instead of IonContent from @ionic/angular. I cannot seem to use Content in Ionic 4 as it doesn't have the scrollToBottom method.

推荐答案

可以通过scrollToBottom()

scrollToBottom(duration?: number) => Promise<void>

为ion-content

<ion-content #content>
</ion-content>

获取 .ts 中的内容 ID 并使用选定的持续时间调用 scrollToBottom 方法

Get the content ID in .ts and call the scrollToBottom method with a chosen duration

@ViewChild('content') private content: any;

ngOnInit() {
  this.scrollToBottomOnInit();
}

scrollToBottomOnInit() {
  this.content.scrollToBottom(300);
}

https://ionicframework.com/docs/api/content

ViewChild 使用提供的内容 ID 获取正确的数据

ViewChild gets the correct data with the provided content ID

@ViewChild('content') private content: any;

ngOnInit 与 ionViewDidEnter/ionViewWillEnter

ngOnInit vs ionViewDidEnter / ionViewWillEnter

ngOnInit 如果您从导航堆栈返回，则不会触发， ionViewWillEnter/ionViewDidEnter 会.因此，如果您将该函数放置在 ngOnInit 中，如果您向后导航，则 scrollToBottom 将不起作用.

ngOnInit doesn't trigger if you come back from a navigation stack, ionViewWillEnter / ionViewDidEnter will. So if you place the function in ngOnInit, the scrollToBottom won't work if you navigate back.

这篇关于Ionic 4 离子含量滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！