Ionic3中如何获取ion-content实例实现平滑滚动到顶部？

这问题我之前在项目里也碰到过，直接操作DOM元素的方法在Android WebView里确实有兼容性问题，还没法用Ionic自带的平滑动画。其实用@ViewChildren替代@ViewChild就能直接获取每个ion-content对应的Content实例，完美调用官方的滚动方法。

具体实现步骤 #

1. 修改模板，给每个ion-content添加模板变量 #

把你的模板改成这样，给每个ion-content单独加一个模板变量（比如#contentEl），而不是只给父元素加：

<div *ngFor="let page of pages">
  <ion-content #contentEl></ion-content>
</div>

2. 在组件中用@ViewChildren获取所有Content实例 #

通过@ViewChildren查询所有匹配模板变量的Content组件，这样拿到的就是Ionic官方的Content实例，能直接调用它的滚动方法：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { Content } from '@ionic/angular';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss']
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('contentEl') contentList: QueryList<Content>;

  // 示例：滚动到指定索引的ion-content顶部
  scrollToTargetTop(index: number) {
    // 把QueryList转成数组，通过索引获取目标Content
    const targetContent = this.contentList.toArray()[index];
    if (targetContent) {
      // 用scrollToTop方法快速滚动到顶部，参数是动画时长（毫秒）
      targetContent.scrollToTop(500);
      // 或者用scrollTo自定义滚动参数
      // targetContent.scrollTo({ top: 0, left: 0, duration: 500 });
    }
  }

  ngAfterViewInit() {
    // 视图初始化完成后才能确保contentList有值
    // 比如这里可以调用scrollToTargetTop(0)来滚动第一个content到顶部
    // this.scrollToTargetTop(0);
  }
}

关键说明 #

• @ViewChildren会返回一个QueryList<Content>，它是一个可观察的列表，当*ngFor的列表变化时（比如pages数组新增/删除元素），这个列表会自动更新。
• 直接拿到的Content实例调用的scrollToTop或scrollTo方法是Ionic官方实现的，在Android WebView里完全支持，而且自带平滑的滚动动画，完美替代DOM元素的scrollTo或scrollTop属性。
• 一定要在ngAfterViewInit生命周期钩子之后操作contentList，因为只有当视图初始化完成后，Angular才会把对应的Content实例注入进来。

内容的提问来源于stack exchange，提问作者蔚蓝海域