Nav

优质
小牛编辑
130浏览
2023-12-01

这是一个基本的导航控制器。

使用方法

  1. import {GettingStartedPage} from 'getting-started';
  2. @App({
  3. template: `<ion-nav [root]="rootPage"></ion-nav>`
  4. })
  5. class MyApp {
  6. constructor(){
  7. this.rootPage = GettingStartedPage;
  8. }
  9. }

Back navigation

swipeBackEnabled用来控制滑动返回。

  1. <ion-nav swipeBackEnabled="false" [root]="rootPage"></ion-nav>

下图是一个App的架构

  1. +-------+
  2. | App |
  3. +---+---+
  4. <ion-app>
  5. |
  6. +------------+-------------+
  7. | Ionic Nav Controller |
  8. +------------+-------------+
  9. <ion-nav>
  10. |
  11. |
  12. Page 3 +--------------------+ LoginPage
  13. Page 2 +--------------------+ |
  14. Page 1 +--------------------+ | | +--------------------+
  15. | | Header |<-----------------| Login |
  16. +--------------------+ | | +--------------------+
  17. | | | | | | | Username: |
  18. | | | | | | | Password: |
  19. | | | Page 3 is | | | | |
  20. | | | only content | | | | |
  21. | | | |<-----------------| |
  22. | | | | | | | |
  23. | | | | | | | |
  24. | +------------------|-+ | | |
  25. | | Footer |-|-+ | |
  26. | +------------------|-+ | |
  27. +--------------------+ +--------------------+
  28. +--------------------+ +--------------------+ +--------------------+
  29. | Header | | Content | | Content |
  30. +--------------------+ | | | |
  31. | Content | | | | |
  32. | | | | | |
  33. | | | | | |
  34. | | | | | |
  35. | | | | | |
  36. | | | | | |
  37. | | | | | |
  38. | | | | | |
  39. | | +--------------------+ | |
  40. | | | Footer | | |
  41. +--------------------+ +--------------------+ +--------------------+

输入属性

  • root Page

    当前打开的页面。

  • swipeBackEnabled boolean

    是否开启滑动返回