Ionic 3中如何保留列表滚动位置？

嗨，这个问题我之前在项目里也碰到过！Ionic 3其实有内置的官方方案来保留滚动位置，不用手动在ionViewDidLeave/ionViewDidEnter里存状态，下面给你一步步说怎么实现：

核心原理：Ionic的视图缓存机制 #

Ionic 3的导航栈默认会缓存最近的页面，当你用push方法跳转到详情页时，列表页会被保留在栈中，而ion-content组件会自动保存当前的滚动位置，当你返回时自动恢复。不过要确保几个配置正确：

1. 给列表页启用缓存 #

在列表页的@IonicPage()装饰器里添加cache: true配置，明确告诉Ionic要缓存这个页面：

import { IonicPage } from 'ionic-angular';

@IonicPage({
  name: 'article-list',
  cache: true // 启用页面缓存
})
export class ArticleListPage {
  // 页面逻辑...
}

2. 用正确的导航方式跳转详情页 #

一定要用NavController.push()方法跳转到详情页，不要用setRoot或者popToRoot这类会销毁列表页的方法。示例代码：

import { NavController } from 'ionic-angular';
import { ArticleDetailPage } from '../article-detail/article-detail';

export class ArticleListPage {
  constructor(private navCtrl: NavController) {}

  openArticleDetail(articleId: number) {
    // 用push方法将详情页压入导航栈，列表页会被缓存
    this.navCtrl.push(ArticleDetailPage, { articleId });
  }
}

3. 避免重复加载数据导致列表重置 #

如果你的列表是懒加载数据（比如滚动加载更多），注意不要在ionViewWillEnter里每次都重新加载全部数据，否则列表会被重置，滚动位置自然也没了。可以加个首次加载的判断：

private isFirstLoad = true;

ionViewWillEnter() {
  if (this.isFirstLoad) {
    // 只有第一次进入时加载初始数据
    this.loadInitialArticles();
    this.isFirstLoad = false;
  }
}

// 滚动加载更多的方法
loadMoreArticles() {
  // 加载下一页数据的逻辑...
}

特殊情况处理 #

如果你的详情页是用模态框（ModalController）打开的，那关闭模态框后列表页的滚动位置本来就不会变，因为模态框不会修改导航栈，这种情况不需要额外配置。

如果上述官方缓存方案不生效，可能是导航栈被意外清空（比如调用了popToRoot或者setRoot），这时候才需要考虑手动保存滚动位置——但优先推荐官方的缓存方案，因为更符合Ionic的设计逻辑。

内容的提问来源于stack exchange，提问作者Dani