Question

我有一个离子滚动组件

<ion-scroll scrollY="true" style="height: 52vh;">
  {{ text }}
</ion-scroll>

里面显示的文字继续增长（想想讲词提示器样式），并最终长到指定的离子滚动高度;然后可以手动向下滚动容器。手动滚动工作正常，但有没有办法以编程方式向下滚动，因为更多文本被添加？

Answer 1

尝试Angular 2或更高版本：

page.html

  <div class="scroll" #scrollMe (change)="scrollToBottom()">
    {{ text }}
  </div>

page.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Content } from 'ionic-angular';

...

export class Page {

  @ViewChild('scrollMe') scrollElement: ElementRef;

  public text: String = '';

  constructor(){}

  ionViewDidLoad() {
    this.appendText();
  }

  // append text (loop...)
  appendText() {
    setTimeout( ()=> {
      this.text += 'Append more text ';
      this.appendText();
    }, 100);
  }

  // scroll to bottom (div element)
  scrollToBottom() {
    setTimeout( ()=> {
      this.scrollElement.nativeElement.scrollTop = this.scrollElement.nativeElement.scrollHeight;
    }, 50);
  }
}

page.scss

page {
    .scroll {
        max-height: 200px; // for example
        overflow-y: scroll; // show vertical scroll
    }
}

离子3：以编程方式将离子滚动内容滚动到底部

1 个答案: