Ionic4 学习笔记(二)：首页制作，创建其他页面

首页的制作

因为项目从简，所以，整体内容也不多，这里首页只放如下几个内容：

标题
数独游戏按钮
设置按钮
关于按钮
同时，把相应的页面先创建好。

创建页面

由于home页面已经有了，就不再生成了，生成数独页面：

ionic generate page sudoku

上方是完整写法，也可以简写，分别创建设置和关于页面：

ionic g page setting
ionic g page about

如果直接输入ionic g，Ionic提供了一个按提示选择生成的界面，可以生成如下的内容：

> page
  component
  service
  module
  class
  directive
  guard
(Move up and down to reveal more choices)

修改首页

创建标题

将首页的内容全部删除，然后在home.page.html新建如下标题内容：

<ion-content [scrollY]="false">
  <div class="title">清新数独</div>
</ion-content>

[scrollY]="false"是Ionic的一个写法，表示禁止纵向的滚动条出现。
相应的，home.page.scss添加如下内容：

.title {
  padding-top: 14vh;
  padding-bottom: 10vh;
  font-size: 8vw;
  text-align: center;
}

此时页面应该显示如下：

首页-标题.jpg

创建三个可跳转的按钮

在home.page.html下方添加内容：

<ion-content [scrollY]="false">
  <div class="title">清新数独</div>
  <div class="button-content" text-center>
    <ion-button routerLink="/sudoku" icon-start>
      <ion-label>数独</ion-label>
    </ion-button>
    <ion-button routerLink="/setting" icon-start>
      <ion-label>设置</ion-label>
    </ion-button>
    <ion-button routerLink="/about" icon-start>
      <ion-label>关于</ion-label>
    </ion-button>
  </div>
</ion-content>

routerLink中填写相应的路由，这个路由在app-routing.module.ts中可以找得到，相应的，home.page.scss：

.title {
  padding-top: 14vh;
  padding-bottom: 10vh;
  font-size: 8vw;
  text-align: center;
}

.button-content {
  ion-button {
    width: 240px;
    height: 44px;
    margin-bottom: 5vh;
    font-size: 18px;
    --border-radius: 200px;
  }
}

此时，几个按钮已经可以跳转相应的页面了，应该显示如下：

首页-标题和按钮.jpg

创建三个子页面跳转回来的返回按钮：

<ion-buttons slot="start">
   <ion-back-button defaultHref="home" text=""></ion-back-button>
</ion-buttons>

具体使用方式，sudoku.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home" text=""></ion-back-button>
    </ion-buttons>
    <ion-title>数独</ion-title>
  </ion-toolbar>
</ion-header>

setting.page.html、about.page.html类似，就不多贴代码了。

本节最终效果录屏：

首页点击效果录制.gif

上一篇：Ionic4 学习笔记(一)：数独-创建项目

下一篇：Ionic4 学习笔记(三)

最后编辑于：2019.03.12 11:28:47