首頁(yè)的制作
因?yàn)轫?xiàng)目從簡(jiǎn)昭雌，所以，整體內(nèi)容也不多健田，這里首頁(yè)只放如下幾個(gè)內(nèi)容：
- 標(biāo)題
- 數(shù)獨(dú)游戲按鈕
- 設(shè)置按鈕
- 關(guān)于按鈕
同時(shí)烛卧，把相應(yīng)的頁(yè)面先創(chuàng)建好。
創(chuàng)建頁(yè)面
由于home頁(yè)面已經(jīng)有了妓局，就不再生成了总放，生成數(shù)獨(dú)頁(yè)面：
ionic generate page sudoku
上方是完整寫(xiě)法，也可以簡(jiǎn)寫(xiě)好爬，分別創(chuàng)建設(shè)置和關(guān)于頁(yè)面：
ionic g page setting
ionic g page about
如果直接輸入ionic g局雄，Ionic提供了一個(gè)按提示選擇生成的界面，可以生成如下的內(nèi)容：
> page
component
service
module
class
directive
guard
(Move up and down to reveal more choices)
修改首頁(yè)
創(chuàng)建標(biāo)題
將首頁(yè)的內(nèi)容全部刪除存炮，然后在home.page.html新建如下標(biāo)題內(nèi)容：
<ion-content [scrollY]="false">
<div class="title">清新數(shù)獨(dú)</div>
</ion-content>
[scrollY]="false"是Ionic的一個(gè)寫(xiě)法炬搭，表示禁止縱向的滾動(dòng)條出現(xiàn)。
相應(yīng)的穆桂，home.page.scss添加如下內(nèi)容：
.title {
padding-top: 14vh;
padding-bottom: 10vh;
font-size: 8vw;
text-align: center;
}
此時(shí)頁(yè)面應(yīng)該顯示如下：
創(chuàng)建三個(gè)可跳轉(zhuǎn)的按鈕
在home.page.html下方添加內(nèi)容：
<ion-content [scrollY]="false">
<div class="title">清新數(shù)獨(dú)</div>
<div class="button-content" text-center>
<ion-button routerLink="/sudoku" icon-start>
<ion-label>數(shù)獨(dú)</ion-label>
</ion-button>
<ion-button routerLink="/setting" icon-start>
<ion-label>設(shè)置</ion-label>
</ion-button>
<ion-button routerLink="/about" icon-start>
<ion-label>關(guān)于</ion-label>
</ion-button>
</div>
</ion-content>
routerLink中填寫(xiě)相應(yīng)的路由宫盔，這個(gè)路由在app-routing.module.ts中可以找得到，相應(yīng)的享完，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;
}
}
此時(shí)灼芭，幾個(gè)按鈕已經(jīng)可以跳轉(zhuǎn)相應(yīng)的頁(yè)面了，應(yīng)該顯示如下：
創(chuàng)建三個(gè)子頁(yè)面跳轉(zhuǎn)回來(lái)的返回按鈕：
<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>數(shù)獨(dú)</ion-title>
</ion-toolbar>
</ion-header>
setting.page.html彼绷、about.page.html類似巍佑，就不多貼代碼了。
本節(jié)最終效果錄屏：
上一篇：Ionic4 學(xué)習(xí)筆記(一)：數(shù)獨(dú)-創(chuàng)建項(xiàng)目
下一篇：Ionic4 學(xué)習(xí)筆記(三)
