微信小程序开发 教案 4.5 教案-微付宝九宫格导航界面设计VIP

1、第4章flex布局任务4.5微付宝九宫格导航界面设计课时内容微付宝九宫格导航界面设计课时4教学目标掌握flex-direction属性的用法； 掌握flex-wrap属性的用法； 掌握justify-content属性的用法； 掌握align-items属性的用法； 掌握align-content属性的用法；教学重难点掌握flex-direction属性的用法； 掌握flex-wrap属性的用法； 掌握justify-content属性的用法; 掌握align-items属性的用法； 掌握align-content属性的用法；教学设计.教学思路：以微付宝九宫格导航界面的编写任务为例，介绍小程序

2、界面设计中常 用的属性及其功能。通过小程序实战巩固基础知识。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述九宫格导航又称为宫格导航，是很多小程序或App （如拼多多、美团外卖、大众点评、支付宝 等）采用的一种导航设计设计方式。通过这种导航界面设计方式，可以将重要内容放入宫格导航， 从而为用户提供明确的接口。本任务要利用flex布局设计一个微付宝九宫格导航界面。本节的学习目标：熟练掌握flex布局的容器属性，对导航按钮进行操作。以下介绍微付宝九宫格导航界面小程序的程序编写。二、导入新知本任务主要涉及的知识要点是通过设置flex布局的容器属性，对导航按钮进行操作。fle

3、x布局中的容器属性如下表所小。属 性说 明默认值flex-direction设置项目的排列方向rowflex-wrap设置项目是否换行nowrapflex-flowflex-direction和flex-wrap属性的简写形式row nowrapjustify-content设置项目在主轴方向上的对齐方式，以及分配项目之间 及其周围多余的空间flex-startalign-items设置项目在行中的对齐方式stretchalign-content当多行排列时，设置行在交叉轴方向上的对齐方式，以 及分配项目之间及其周围多余的空间stretch三、实现效果微付宝九宫格导航界面如图所示。8:4210

4、0% 丽宝:p三回其目e-a 付款 收款 卡包回。W导0I 室话S 击母炯bM他用卡曲400IMX eQM wa 僖 M星勘施：；大车fh ttx 至也四、任务实现1 图标准备本任务涉及的图标较多，推荐一个免费图标下载网站一一阿里巴巴矢量图标库，该网站 首页如图所示。在输入框中输入“更多”，按回车键进行搜索，出现“更多”图标的页面，如图所示。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 微额宝 医疗健 康 image 滋 =icon di diimage)滴滴 芝麻信用 span)view class=white-flex2”vspM火车票机票 spanVmage 黑 =7icon迦谈.磨“ Ximagespan借 呗 健康码 酒 店V力311span全部 V span3.编写index.wxss文件中的代码该文件种定义了 8 种样式：.container、.b