5.3 教案-表单组件.docx

《5.3 教案-表单组件.docx》由会员分享，可在线阅读，更多相关《5.3 教案-表单组件.docx（4页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、5.3 教案-表单组件YOUR LOGO原 创 文 档 请 勿 盗 版第5章 小程序组件任务5.3 表单组件课时内容表单组件课时24教学目标了解什么是表单组件及其作用；掌握表单组件分类；掌握button按钮组件、radio单项选择器组件、 checkbox多项选择器组件、 input单行输入框组件、 label改进表单可用性组件、form表单组件10种表单组件、 picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、textarea多行输入框组件的属性与应用方法。教学重难点掌握button按钮组件、radio单项

2、选择器组件、 checkbox多项选择器组件、 input单行输入框组件、 label改进表单可用性组件、form表单组件10种表单组件、 picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、textarea多行输入框组件的属性与应用方法教学设计1.教学思路：介绍什么是表单组件及其作用，通过多媒体演示和实机操作讲解微信小程序button按钮组件、radio单项选择器组件、 checkbox多项选择器组件、 input单行输入框组件、 label改进表单可用性组件、form表单组件10种表单组件、 picker滚

3、动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、textarea多行输入框组件的属性与应用方法与实现；通过小程序实战巩固基础知识。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序表单组件button按钮组件、radio单项选择器组件、 checkbox多项选择器组件、 input单行输入框组件、 label改进表单可用性组件、form表单组件10种表单组件、 picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、swi

4、tch开关选择器组件、textarea多行输入框组件的属性与应用。本节的学习目标：(1) 了解什么是表单组件及其作用；(2) 掌握表单组件分类；(3) 掌握button按钮组件、radio单项选择器组件、 checkbox多项选择器组件、 input单行输入框组件、 label改进表单可用性组件、form表单组件10种表单组件、 picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、textarea多行输入框组件的属性与应用方法。二、导入新知1.表单组件分类微信小程序提供了丰富的表单组件： button按钮组件、

5、radio单项选择器组件、 checkbox多项选择器组件、 input单行输入框组件、 label改进表单可用性组件、form表单组件10种表单组件、 picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、textarea多行输入框组件。2、 button按钮组件3、 radio单项选择器组件4、 checkbox多项选择器组件5、 input单行输入框组件6、 label改进表单可用性组件7、 form表单组件10种表单组件8、 picker滚动选择器组件9、 picker-viewer嵌入页面的滚动选择器组

6、件10、 slider滑动选择器组件11、 switch开关选择器组件12、 textarea多行输入框组件。三、 实现效果（1）使用表单组件button设置3组效果，包括迷你按钮、普通按钮的不同状态、单击按钮获得用户信息。（2）使用表单组件radio, 能成功识别选项的名称和选中状态，一旦选了新的选项，原先的选项将自动取消选中状态，即为单选按钮。同时，当选项被改变时，在控制台会自动输出被选中的值。（3）使用表单组件checkbox，在checkbox.js的data中设置了一个数组checkboxItems，用于记录多选选项的名称(name)、值(value)以及初始的选中状态(checke

7、d)。由图（a）可页面初始显示效果能成功识别选项的名称和选中状态（默认“橙子”选项为选中效果）；允许手动进行多选；当选项被改变时在console控制台会自动输出所有被选中的值。（4）使用表单组件input实现5组效果，即密码输入框、最大字符长度限制为10、禁用输入框、自定义placeholder样式以及输入框事件监听。（5）使用表单组件label实现两组效果，包括使用for属性绑定id、直接将控件放到label组件的内部。（6）使用表单组件form为其绑定监听事件bindsubmit=onSubmit和bindreset=onRese，分别用于监听表单的提交和重置动作。（7）使用表单组件pic

8、ker,实现普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器五种不同显示效果的选择器，通过改变picker组件的mode属性值和bandchange属性值实现不同选择器效果。（8）使用表单组件picker-view, 用于模拟点餐，其内部包含了列，分别用于显示西餐菜单中的汤、主食和甜点。（9）使用表单组件slider, 实现4种滑动条的情况，即滑动条右侧显示当前取值、自定义滑动条颜色和滑块样式、禁用滑动条(无法改变当前数值)、滑动条事件监听。（10）使用表单组件switch, 实现使用标签配合checked属性实现默认选中的状态，并绑定自定义单击事件switchChange。（11）使用表单组件textarea，定义3组，分别用于测试，即自动变高、自定义占位符颜色、被禁用状态。四、 任务实现略，详见教材代码。练习