《微信小程序开发案例教程》教案 第7课 视图容器组件与基础内容组件（一）.docx
PAGE4
PAGE4
PAGE3
PAGE3
PAGE
PAGE4
PAGE
PAGE3
PAGE
PAGE1
课题
视图容器组件与基础内容组件（一）
课时
2课时（90min）
教学目标
知识技能目标：
（1）了解view视图容器组件的功能
（2）了解scroll-view视图容器组件的功能
（3）了解swiper视图容器组件的功能
素质目标：
锻炼灵活运用理论知识实现不同效果的能力
锻炼观察事物、敢于创新的能力
教学重难点
教学重点：view、scroll-view、swiper等常用视图容器组件的功能
教学难点：能够使用swiper组件设置轮播效果
教学方法
案例分析法、问答法、讨论法、讲授法
教学用具
电脑、投影仪、多媒体课件、教材
教学设计
第1节课：?课前任务→考勤（2min）→问题导入（5min）→传授新知（38min）
第2节课：问题导入（5min）→任务实施（35min）→课堂小结（3min）→作业布置（2min）
教学过程
主要教学内容及步骤
设计意图
第一节课
课前任务
【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件完成课前任务
请大家提前熟悉视图容器组件中常用的view、scroll-view和swiper组件，并对制作微信小程序首页的轮播图有个初步了解。
【学生】完成课前任务
通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣
考勤
（2min）
【教师】使用APP进行签到
【学生】班干部报请假人员及原因
培养学生的组织纪律性，掌握学生的出勤情况
问题导入
（5min）
【教师】创设情景，并组织学生讨论下列问题：
组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序之后，界面中的图片、文字等元素都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。
（1）在日常学习中，常用的视图容组件都有哪些？
（2）想一想容组件的属性语法格式是什么样的结构？
【学生】聆听、思考、讨论、小组代表上台回答问题
【教师】总结学生的回答引入要讲的知识，板书“视图容器组件”
通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣
传授新知
（38min）
【教师】通过学生的发言，引入新的知识，讲解view、scroll-view、swiper常用视图容器组件的功能等知识
一、view
?【教师】组织学生扫码观看“视图容器组件”微课（详见教材），并进行讲解
?【学生】观看、聆听、思考
属性
类型
默认值
说明
hover-class
string
none
点击时的样式类，none表示没有点击效果
hover-stop-propagation
boolean
false
是否阻止本节点的祖先节点出现点击态，false表示不阻止，true表示阻止
hover-start-time
number
50
按住后多长时间出现点击态，单位为毫秒
hover-stay-time
number
400
松开后点击态保持的时间，单位为毫秒
?【教师】随机邀请学生回答以下问题：
怎样在WXML文件中添加一个view组件，然后在其中嵌套两个view组件？
?【学生】聆听、思考、回答
?【教师】总结学生的回答
在相应的WXSS文件中为3个view组件设置样式，代码如下。
.parent{
display:flex;
width:800rpx;
height:400rpx;
background-color:blue;
}
.parent-hover{
background-color:red;
}
.child{
width:200rpx;
height:200rpx;
}
.child_1{
background-color:green;
}
.child_2{
background-color:yellow;
}
.child-hover{
background-color:white;
}
view组件示例运行效果
二、scroll-view
scroll-view是可滚动的视图容器组件，用于创建可滚动的视图区域，用户可通过滑动显示隐藏的内容。
属性
类型
默认值
说明
scroll-x
boolean
false
是否允许横向滚动（水平方向）
scroll-y
boolean
false
是否允许纵向滚动（垂直方向）
scroll-into-view
string