微信小程序開發(fā) 教案 4.5 教案-微付寶九宮格導航界面設計

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

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

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

4、0% 麗寶:p三回其目e-a 付款 收款 卡包回。W導0I 室話S 擊母炯bM他用卡曲400IMX eQM wa 僖 M星勘施：；大車fh ttx 至也四、任務實現(xiàn)1 圖標準備本任務涉及的圖標較多，推薦一個免費圖標下載網(wǎng)站一一阿里巴巴矢量圖標庫，該網(wǎng)站 首頁如圖所示。在輸入框中輸入“更多”，按回車鍵進行搜索，出現(xiàn)“更多”圖標的頁面，如圖所示。0 iconfont ,W 6f* MM MNB MWW 1s= G 0在輸入框中輸入“紅包，并單擊“搜索，按鈕，即可搜索出很多“紅包”圖標，如圖所示，單擊 所需圖標即可下載，并且在下載之前可以配置圖標的顏色。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_頂部背景綠一搜索框結束V!-頂部背景綠-按鈕開始-view class=uicon-flexnspan掃掃 付款view class=icon-flexM 收款 sp

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