Ionic項(xiàng)目實(shí)戰(zhàn) (2)教學(xué)課件

1、企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 01 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)010203了解Ionic的CSS組件掌握Ionic列表掌握Ionic使用輪播圖的步驟學(xué)習(xí)目標(biāo) 通過(guò)Dancer時(shí)代主界面模塊的實(shí)現(xiàn)，了解主界面的設(shè)計(jì)理念及功能實(shí)現(xiàn)，學(xué)習(xí)Ionic相關(guān)組件及如何應(yīng)用列表實(shí)現(xiàn)布局，掌握Ionic使用輪播組件實(shí)現(xiàn)主界面模塊的輪播，具有使用Ionic組件實(shí)現(xiàn)主界面布局的能力。04使用Ionic組件實(shí)現(xiàn)主界面布局的能力企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）02 02 學(xué)習(xí)路徑學(xué)習(xí)路徑 學(xué)習(xí)路徑學(xué)

2、習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）03 03 任務(wù)描述任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開(kāi)發(fā)環(huán)境 任務(wù)描述任務(wù)描述企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 情境導(dǎo)入情境導(dǎo)入對(duì)于一款手機(jī)軟件，其主界面是非常重要的，可以說(shuō)它是直接影響軟件用戶數(shù)量的關(guān)鍵。所以界面設(shè)計(jì)人員Ellison在主界面的設(shè)計(jì)和美化上花了很大的心思，他在設(shè)計(jì)主界面時(shí)不僅考慮到軟件信息的宣傳還考慮了用戶使用軟件的便利性，所以Ellison在界面中添加了手機(jī)軟件中常用的輪播圖元素。主界面中還有視頻和音樂(lè)的推薦功能，點(diǎn)擊跳轉(zhuǎn)對(duì)應(yīng)界面可進(jìn)行視頻和音頻的播放。本模塊主要通過(guò)實(shí)現(xiàn)Dancer時(shí)代的主界面了解

3、Ionic的輪播圖和導(dǎo)航組件。企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 功能描述功能描述使用選項(xiàng)卡組件實(shí)現(xiàn)頁(yè)面的切換 01 02 03使用Ionic圖標(biāo)豐富APP頁(yè)面使用列表組件實(shí)現(xiàn)頁(yè)面的布局企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 基本框架基本框架企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）04 04 任務(wù)技能任務(wù)技能01020304任務(wù)技能Ionic的CSS組件導(dǎo)航組件Ionic列表Ionic功能Ionic字體圖標(biāo)1按鈕2Ionic表單3ionIcons采用了TrueType字體實(shí)現(xiàn)圖標(biāo)樣式，有超過(guò)700個(gè)圖標(biāo)可供選擇。 Ionic的的CSS組件組件企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）建設(shè)制造強(qiáng)國(guó)12選項(xiàng)

4、卡通過(guò)ion-tabs標(biāo)簽定義，選項(xiàng)使用ion-tab（ion-tab是ion-tabs的子標(biāo)簽，每個(gè)選項(xiàng)卡的選項(xiàng)都包含一個(gè)相對(duì)應(yīng)的界面）標(biāo)簽定義。Ionic提供的側(cè)邊菜單通過(guò)點(diǎn)擊帶有menuToggle元素的標(biāo)簽，從當(dāng)前界面的側(cè)面滑入的導(dǎo)航，默認(rèn)情況下從左側(cè)劃入，通過(guò)設(shè)置side=right實(shí)現(xiàn)從右側(cè)滑入。 導(dǎo)航組件導(dǎo)航組件Ionic選項(xiàng)卡Ionic側(cè)欄菜單企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）基本列表1列表分隔符2滑動(dòng)列表3列表分隔符可以用來(lái)將列表劃分成多個(gè)列表組，好處是使瀏覽者更方便查詢列表項(xiàng)。其實(shí)現(xiàn)方法是使用標(biāo)簽作為列表容器，通過(guò)標(biāo)簽將列表劃分為多個(gè)部分。滑動(dòng)列表通過(guò)向左或向右滑動(dòng)，以顯

5、示一組隱藏的按鈕。通過(guò)在ion-list組件內(nèi)添加ion-item-sliding組件實(shí)現(xiàn)滑動(dòng)列表，添加標(biāo)簽包含滑動(dòng)出的按鈕。Ionic列表列表企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）默認(rèn)情況下，基本列表之間有分隔線，若要隱藏列表項(xiàng)之間的分隔線，只需在標(biāo)簽內(nèi)添加no-lines屬性。Ionic卡片1輪播組件2數(shù)據(jù)查詢3代碼結(jié)構(gòu)由輪播圖容器（標(biāo)簽）和輪播圖組件（標(biāo)簽）組成在Ionic項(xiàng)目中，當(dāng)列表數(shù)據(jù)過(guò)多時(shí)，要找一條特定的記錄就尤為困難，這時(shí)數(shù)據(jù)查詢功能就可以用到。其實(shí)現(xiàn)需要調(diào)用getItems()方法，調(diào)用該方法的觸發(fā)類型有三種。Ionic功能功能企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）近年來(lái)卡片在前

6、端設(shè)計(jì)使用越來(lái)越頻繁，卡片具有內(nèi)容顯示分層次、更加規(guī)整等特點(diǎn)，它是一個(gè)更好組織信息展示的工具。在設(shè)計(jì)移動(dòng)端應(yīng)用時(shí)，卡片會(huì)根據(jù)屏幕大小自適應(yīng)大小。05 05 任務(wù)實(shí)施任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題輸入標(biāo)題第一步：創(chuàng)建選項(xiàng)卡、首頁(yè)、上傳、分享、我的界面并配置第二步：首頁(yè)輪播圖的制作第三步：輪播圖下方圖標(biāo)區(qū)域制作第四步：底部列表的制作，并添加頁(yè)面跳轉(zhuǎn)點(diǎn)擊輸入說(shuō)明文字點(diǎn)擊輸入說(shuō)明文字點(diǎn)擊輸入說(shuō)明文字 任務(wù)實(shí)施任務(wù)實(shí)施企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）06 06 任務(wù)總結(jié)任務(wù)總結(jié)任務(wù)技能任務(wù)技能任務(wù)實(shí)施任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)總結(jié)任務(wù)描述任務(wù)描述 本項(xiàng)目通過(guò)對(duì)Dancer時(shí)代主界面模塊的學(xué)習(xí)，對(duì)Ionic相關(guān)組件及應(yīng)用列表布局的使用具有初步了解，對(duì)Ionic相關(guān)的導(dǎo)航及菜單欄的使用有所認(rèn)識(shí)，同時(shí)掌握了Ionic使用組件實(shí)現(xiàn)主界面的布局和美化。 任務(wù)總結(jié)任務(wù)總結(jié)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞PPT模板下載： 行業(yè)PPT模板：