Question

我正在开发离子版App。加载页面时scrollToBottom无效。

Html部分

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

TS科

@ViewChild(Content) content: Content;

ionViewDidLoad() {
    console.log('ionViewDidLoad PersonalChatPage');
    this.content.scrollToBottom();
}

Answer 1

添加延迟将解决您的问题。

ionViewDidLoad() {
    console.log('ionViewDidLoad PersonalChatPage');
    let that = this;
    setTimeout(()=>{that.content.scrollToBottom();},200); 
}

另一件事是，您的代码具有 #content 标记，如下所示：

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

然后你可以这样写：

@ViewChild('content') content: Content;

Answer 2

问题在于scrollToBottom()代码可能在DOM完全更新之前运行。

可以尝试几种基于对DOM / Template的反应来执行滚动的解决方案。

第一个解决方案

我发现的最好的是josh Morony

在这篇文章中

要恢复，请执行以下操作：仅当触发某个DOM事件时，才可以使用Mutation Observer执行滚动。

这里有一些代码来说明它。

// To get Typescript completion for Ionic 4 use: 
// import { IonContent } from '@angular/core'
// @ViewChild(Content) contentArea: IonContent;


@ViewChild(Content) contentArea: Content;
// list in the template to observe
@ViewChild(List, {read: ElementRef}) chatList: ElementRef;

// MutationObserver doesn't need to be imported
private mutationObserver: MutationObserver;

ionViewDidLoad(){

    // Code to be executed on event
    this.mutationObserver = new MutationObserver((mutations) => {
        this.contentArea.scrollToBottom();
    });

    // the Element that will be Observed
    this.mutationObserver.observe(this.chatList.nativeElement, {
        childList: true
    });

}

在Mozilla上有关Mutation Observer的更多信息。它的浏览器兼容性很好。

第二个解决方案

我还没有亲自尝试过，但是离子团队的mhartington可以在这个答案中找到另一个非常有趣的选择。

代码如下：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items; let last = last">
      {{ item }}
      {{ last ? callFunction() : '' }}
    </ion-item>
  </ion-list>
</ion-content>


export class Page2 {
  public items: any[] = [];
  @ViewChild(Content) content: Content
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams) {
    setTimeout(() => {
      for (let i = 0; i < 100; i++) {
        this.items[i] = i
      }
    }, 300)
  }
  callFunction(){
    this.content.scrollToBottom(0)
  }
}

因此，想法是仅在模板上创建了最后一项后才调用this.content.scrollToBottom()。使用索引，这将使您能够自动滚动到任何元素，尽管我目前看不到它的用途。

关于在Angular中直接操作DOM不好的说法：没有任何操作，只是在组件中对DOM事件做出反应...

内容滚动到底部不起作用

2 个答案:

第一个解决方案

第二个解决方案