Question

我目前有一篇很长的文章，几乎是一本简短的书，我试图将其分成子页面。目前我有概述页面，它链接到文章的所有部分和页面之间的链接。

我有什么： 文章分为10个静态页面：page1.html, page2.html, ... , page10.html

我使用ionic g page page_n创建了10个页面，概述页面ionic g page Overview将链接到文章的所有部分（有点像书）。

在OverviewPage.ts中有方法链接到各个部分。

  # run import of all 10 pages

  GoToPage1() {
    this.navCtrl.push(Page1);
  }
  GoToPage2() {
    this.navCtrl.push(Page2);
  }

等等。每个Page.ts都有类似的方法可以链接到下一页和上一页。

然而，这种结构似乎效率低下：如果用户浏览概述，请阅读第1页，然后是第2页，然后是第3页，并决定点击导航中的后退按钮（而不是直接返回在概述中，用户将进入第2页，然后返回第1页，依此类推。）

相反，我可以通过定义详细信息页面来解决问题（因此我只需要创建总共2个页面：概述和详细信息），这将动态加载这些部分，具体取决于从概述页面传递的参数，以及加载相应的HTML页面文件。

问题：我真的不知道如何解决这个问题，我们非常感谢任何解决方案。

P.S。我是Ionic的新手

Answer 1

我建议你在这种情况下使用幻灯片。

<ion-slides>
  <ion-slide>
    <h1>page 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>page 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>page 3</h1>
  </ion-slide>
</ion-slides>

您可以通过移动屏幕或使用此方法使用按钮进行滑动：

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);
  }
}

有关详细信息，请访问documentation

离子框架3：将长篇文章拆分成小页面

1 个答案: