工程訓練02 歡迎頁的實現

2021-09-27 08:51:24 字數 1636 閱讀 2319

1.1任務描述

使用者在介面上左右滑動,輪流顯示三張,通過這三張簡單介紹軟體。

1.2任務步驟

1.2.1建立歡迎頁元件

ionic generate page routes/welcome

或者

ionic g page welcome

或者

ionic g page welcome --no-module

1.2.2歡迎頁設定成預設頁

const routes: routes = [

, ,

, // 下面這行**是在建立頁面時,ionic自動更新的

];

1.2.3為介面新增輪播

ion-slides:幻燈片(輪播、旋轉木馬)元件是個多節容器。每個部分都可以在其間滑動或拖動。它包含任意數量的slide元件。

ion-slide:滑動元件是slides的子元件。任何幻燈片內容都應該寫在此元件中,並且應該與幻燈片一起使用。

ion-content:內容元件提供了易於使用的內容區域。

1.2.4新增「跳過」按鈕

跳過

ion-header:標題元件是包含工具欄元件的父級元件。注意:ion-header必須是頁面的三個根元素之一(ion-content,ion-footer)。

ion-*******:工具欄元件

ion-buttons:按鈕組元件,用於存放1個或者多個按鈕。

ion-button:按鈕元件

ion-******* }

import  from '@angular/core';

@component()

export class welcomepage implements oninit

ngoninit()

}

1.2.5控制「跳過」按鈕的顯示或者隱藏

export class welcomepage implements oninit 

}

當showskip值為true時,顯示「跳過」按鈕,當showskip值為false時,隱藏「跳過」按鈕。

跳過
為元件類新增onslidewillchange方法

export class welcomepage implements oninit ) slides: ionslides;

constructor()

ngoninit()

onslidewillchange(event) );

}}

1.2.6新增登入和註冊按鈕

在第三個幻燈片中新增登入和註冊兩個按鈕,並且把這兩個按鈕固定在介面的底部。

.fixed-bottom}

修改ion-slides元素中的第三個ion-slide元素

登入

註冊

html引導頁的實現

使用無限大的陰影 使用js禁用body的touchmove事件 使用乙個透明層遮住 使用transition過渡即可 步驟1div div class step class step address 步驟2div div class step class step address 步驟3div di...

頁表項和頁表的關係 Linux中的頁表實現

頁表是軟體實現的,但是頁表的查詢是mmu完成的,所以硬體定義了頁表的實現規則,軟體可以做的只有選擇頁表的級數,是否使用huge page以及填充對應的許可權標誌位。前面的文章主要介紹了頁表的實現規則,本文將討論linux系統中頁表的具體實現。相關資料結構 還是那個 頁表,但增加了很多內容。頁表pgd...

母版頁呼叫內容頁的方法的簡單實現

在內容頁中如何呼叫母版頁上的內容大家想必都已經知道,這裡我也不再囉嗦。我想介紹給大家的方法是如何在母版頁中如何呼叫內容頁的方法。母版頁給我們帶來了很多方便性,但也帶來了乙個問題 在設計母版頁的時候,總會碰到需要在母版頁中呼叫內容頁的方法,但此時內容頁尚未設計,如何呼叫呢?下面就讓我用乙個例項給大家講...