离子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错误TypeError:无法读取未定义的属性'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.

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