微信小程序開發(fā) 教案 4.5 教案-微付寶九宮格導(dǎo)航界面設(shè)計(jì)

1、第4章flex布局任務(wù)4.5微付寶九宮格導(dǎo)航界面設(shè)計(jì)課時內(nèi)容微付寶九宮格導(dǎo)航界面設(shè)計(jì)課時4教學(xué)目標(biāo)掌握flex-direction屬性的用法； 掌握flex-wrap屬性的用法； 掌握justify-content屬性的用法； 掌握align-items屬性的用法； 掌握align-content屬性的用法；教學(xué)重難點(diǎn)掌握flex-direction屬性的用法； 掌握flex-wrap屬性的用法； 掌握justify-content屬性的用法; 掌握align-items屬性的用法； 掌握align-content屬性的用法；教學(xué)設(shè)計(jì).教學(xué)思路：以微付寶九宮格導(dǎo)航界面的編寫任務(wù)為例，介紹小程序

2、界面設(shè)計(jì)中常 用的屬性及其功能。通過小程序?qū)崙?zhàn)鞏固基礎(chǔ)知識。.教學(xué)手段：多媒體+計(jì)算機(jī).教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容一、任務(wù)描述九宮格導(dǎo)航又稱為宮格導(dǎo)航，是很多小程序或App （如拼多多、美團(tuán)外賣、大眾點(diǎn)評、支付寶 等）采用的一種導(dǎo)航設(shè)計(jì)設(shè)計(jì)方式。通過這種導(dǎo)航界面設(shè)計(jì)方式，可以將重要內(nèi)容放入宮格導(dǎo)航， 從而為用戶提供明確的接口。本任務(wù)要利用flex布局設(shè)計(jì)一個微付寶九宮格導(dǎo)航界面。本節(jié)的學(xué)習(xí)目標(biāo)：熟練掌握flex布局的容器屬性，對導(dǎo)航按鈕進(jìn)行操作。以下介紹微付寶九宮格導(dǎo)航界面小程序的程序編寫。二、導(dǎo)入新知本任務(wù)主要涉及的知識要點(diǎn)是通過設(shè)置flex布局的容器屬性，對導(dǎo)航按鈕進(jìn)行操作。fle

3、x布局中的容器屬性如下表所小。屬 性說 明默認(rèn)值flex-direction設(shè)置項(xiàng)目的排列方向rowflex-wrap設(shè)置項(xiàng)目是否換行nowrapflex-flowflex-direction和flex-wrap屬性的簡寫形式row nowrapjustify-content設(shè)置項(xiàng)目在主軸方向上的對齊方式，以及分配項(xiàng)目之間 及其周圍多余的空間flex-startalign-items設(shè)置項(xiàng)目在行中的對齊方式stretchalign-content當(dāng)多行排列時，設(shè)置行在交叉軸方向上的對齊方式，以 及分配項(xiàng)目之間及其周圍多余的空間stretch三、實(shí)現(xiàn)效果微付寶九宮格導(dǎo)航界面如圖所示。8:4210

4、0% 麗寶:p三回其目e-a 付款 收款 卡包回。W導(dǎo)0I 室話S 擊母炯bM他用卡曲400IMX eQM wa 僖 M星勘施：；大車fh ttx 至也四、任務(wù)實(shí)現(xiàn)1 圖標(biāo)準(zhǔn)備本任務(wù)涉及的圖標(biāo)較多，推薦一個免費(fèi)圖標(biāo)下載網(wǎng)站一一阿里巴巴矢量圖標(biāo)庫，該網(wǎng)站 首頁如圖所示。在輸入框中輸入“更多”，按回車鍵進(jìn)行搜索，出現(xiàn)“更多”圖標(biāo)的頁面，如圖所示。0 iconfont ,W 6f* MM MNB MWW 1s= G 0在輸入框中輸入“紅包，并單擊“搜索，按鈕，即可搜索出很多“紅包”圖標(biāo)，如圖所示，單擊 所需圖標(biāo)即可下載，并且在下載之前可以配置圖標(biāo)的顏色。II10iconfom* M BMBMW MJ

5、 CD二i科G *4ir go se國isffl6聞0CBGCHCBsB國DQ.0B0Brc*6eview class-containerMv!-頂部背景綠色-)view class=Msearch-boxximage src-.icon searchimagex view熱門電影：天空之城spanview class=r,search-box 1 r,ximage src-icon my.jmgr,x；imagex；viewU_頂部背景綠一搜索框結(jié)束V!-頂部背景綠-按鈕開始-view class=uicon-flexnspan掃掃 付款view class=icon-flexM 收款 sp

6、an) 卡包 V!頂部背景綠-按鈕結(jié)束Qv!_中部背景白一按鈕第一行view class-icon-flexl n保險服務(wù)mage c=r7iconjiaofei.BngMX image生活繳費(fèi)V span市民中心 轉(zhuǎn)賬 span信用卡還款view class-icon-flexl Vmage /= icongyi.睡”x image)span騰訊公益 spanvspan 微額寶 醫(yī)療健 康 image 滋 =icon di diimage)滴滴 芝麻信用 span)view class=white-flex2”vspM火車票機(jī)票 spanVmage 黑 =7icon迦談.磨“ Ximagespan借 唄 健康碼 酒 店V力311span全部 V span3.編寫index.wxss文件中的代碼該文件種定義了 8 種樣式：.container、.b