ionic 2 + angular 2: автоматическая прокрутка вниз списка / страницы / чата

вот как я это сделал:

chatPage.HTML-код

<ion-content #content padding class="chatPage">

  <ion-list no-lines>
    <ion-item *ngFor="let msg of messages" >
      <chat-bubble [message]="msg"></chat-bubble>
    </ion-item>
  </ion-list>

</ion-content>

важный момент в chatPage.HTML-код is #content on <ion-content>. Я использую #content идентификатор для получения ссылки на <ion-content> в своем chatPage.js С помощью ViewChild.

теперь для фактической логики прокрутки:

chatPage.js

import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'build/pages/chatPage/chatPage.html',
  queries: {
    content: new ViewChild('content')
  }
})
export class ChatPage {
  constructor() { 

  }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

кроме того, всякий раз, когда мой chatPage нужно показать еще одно сообщение чата в списке (либо получено новое сообщение, либо отправлено новое сообщение), я использую приведенный ниже код для прокрутки до нового дна:

setTimeout(() => {
  this.content.scrollToBottom(300);//300ms animation speed
});

обновление для Typescript

когда я дал этот ответ, я работал с JavaScript-версией проекта Ionic 2. Со временем я переключился на TypeScript, но забыл обновить ответ, поэтому вот небольшое обновление для chatPage.js (ts):

chatPage.ТС

import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'chatPage.html'
})
export class ChatPage {
  @ViewChild('content') content:any;

  constructor() { }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

Ionic имеет возможность сделать это и работает довольно хорошо: и это наиболее подходящий способ с angular 2+ и Ionic.

import { Content } from ‘ionic-angular’;

export class CommentsPage{
@ViewChild(Content) content: Content;

    ionViewWillEnter(): void {
        this.scrollToBottom();
    }

    scrollToBottom() {
        setTimeout(() => {
            this.content.scrollToBottom();
        });
    }
}

другое решение - "наблюдать" за изменениями в виде прокрутки и прокручивать автоматически. т. е. если есть новые элементы HTML, где появляются сообщения, прокрутите вниз.

export class MessagesPage implements OnInit, OnDestroy {
  autoScroller: MutationObserver;

  ngOnInit() {
    this.autoScroller = this.autoScroll();
  }

  ngOnDestroy() {
    this.autoScroller.disconnect();
  }

  autoScroll(): MutationObserver {
    const autoScroller = new MutationObserver(this.scrollDown.bind(this));

    autoScroller.observe(this.messagesList, {
      childList: true,
      subtree: true
    });

    return autoScroller;
  }

  scrollDown(): void {
    this.scroller.scrollTop = this.scroller.scrollHeight;
    this.messageEditor.focus();
  }

  private get messageEditor(): HTMLInputElement {
    return <HTMLInputElement>document.querySelector('ion-input');
  }

  private get messagesList(): Element {
    return document.querySelector('.messages');
  }

  private get scroller(): Element {
    return this.messagesList.querySelector('.scroll-content');
  }
}

шаблон:

<ion-content>
  <ion-scroll scrollY="true" class="messages">
    <ion-list>
      <div *ngFor="let message of messages">
        <p [innerHtml]="message.text"></p>
      </div>
    </ion-list>
  </ion-scroll>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input [(ngModel)]="message" type="text" placeholder="Write a message..." autocomplete="true" spellcheck="true" tappable></ion-input>
    <ion-buttons end>
      <button ion-button icon-only (click)="sendMessage()">
        <ion-icon name="paper-plane"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

(взять из Ionic2CLI-Метеор-WhatsApp на Github)

Это может помочь кому-то, я дал аналогичный ответ в ионный форум. Это реализовано в Ionic 3.

Я ngAfterViewChecked() для достижения этой функции. Ниже приведена моя структура кода -

дома.в HTML -

<ion-content padding>
    <div #scrollMe id="messages-container" style="overflow: auto; height: 100%;">
        // All messages elemets. Scroll
    </div>
</ion-content>

дома.ТС -

import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements AfterViewChecked{
    // used for scrolling the pane
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    scrollToBottom(): void {
        // method used to enable scrolling
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }
}

.scrollTop и .scrollHeight свойства в JavaScript, посмотреть здесь.

Я добавил проверку, чтобы увидеть, пытался ли пользователь прокрутить вверх.

<div style="overflow: scroll; height: xyz;" #scrollMe [scrollTop]="scrollMe.scrollHeight">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

Это должно работать, если ваш ion-list элемент имеет фиксированную высоту.

<ion-list id="item-list">
    <ion-item> item 1 </ion-item>
    <ion-item> item 2 </ion-item>
    [...]
    <ion-item> item 20 </ion-item>
    <ion-item> item 21 </ion-item>
</ion-list>

[...]

<script>
    var itemList = document.getElementById("item-list");
    itemList.scrollTop = itemList.scrollHeight
</script>

Просто сделай это:

public ionViewDidEnter(){
    this.content.scrollToBottom(300);
}