微信小程序開發(fā) 教案 4.5 教案-微付寶九宮格導航界面設計_第1頁
微信小程序開發(fā) 教案 4.5 教案-微付寶九宮格導航界面設計_第2頁
微信小程序開發(fā) 教案 4.5 教案-微付寶九宮格導航界面設計_第3頁
微信小程序開發(fā) 教案 4.5 教案-微付寶九宮格導航界面設計_第4頁
免費預覽已結束,剩余1頁可下載查看

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領

文檔簡介

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論