鸿蒙基础应用及开发 11

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目4运用页面切换与自定义组件-实现主页面布局效果授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.理解Swiper组件的核心作用、常用属性（autoPlay、loop、indicator等）与适用场景；2.掌握Tabs组件的结构组成（TabContent、TabBar）、关键属性（barPosition、index、controller等）；3.熟悉两种组件的事件绑定方法（onChange、onClick等）。能力目标：1.能够运用Swiper组件实现轮播图功能（自动播放、循环、指示器显示）；2.能够使用Tabs组件实现顶部/底部导航栏与内容页的联动切换；3.能够在DevEcoStudio中编写复合组件代码，解决组件属性配置、布局嵌套等常见问题。素质目标：培养学生的界面交互设计思维；提升代码模块化与规范化编写意识；增强团队协作与问题排查能力。教学重点教学难点重点：1.Swiper组件核心属性（autoPlay、loop、indicator）的配置与使用；2.Tabs组件的结构搭建（TabContent与TabBar关联）与导航位置控制；3.两种组件的事件绑定与交互逻辑实现。难点：1.Swiper组件轮播逻辑与指示器样式的精准控制；2.Tabs组件控制器（TabsController）的使用与页面切换联动；3.组件嵌套布局时的尺寸适配与样式统一。教学小结本节课围绕主页面核心切换组件Swiper与Tabs展开教学，通过概念讲解、案例演示与实操练习，学生理解了两种组件的核心特性与适用场景，掌握了关键属性配置与事件绑定方法，能够独立实现轮播图与导航栏功能，为“就业一点通”APP主页面的交互设计奠定了基础，提升了鸿蒙应用界面的动态交互开发能力。作业及要求在DevEcoStudio中创建新的ArkTS工程，完成以下任务：1.运用Swiper组件实现3张图片的轮播图（自动播放、循环、显示指示器，切换间隔3秒）；2.运用Tabs组件实现底部导航栏（包含“首页”“消息”“我的”3个选项），并绑定对应内容页；3.为轮播图添加点击事件（跳转至指定页面），为导航栏添加选中状态样式（字体变色）；4.运行项目并截图，提交代码文件与运行效果截图，标注核心属性与交互逻辑。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP主页面动态效果，重点演示轮播图自动切换与底部导航栏页面跳转功能，提问：“这些动态切换效果是如何实现的？轮播图的自动播放、导航栏与内容页的联动逻辑是什么？”引导学生聚焦页面切换组件的核心作用。2.回顾衔接：结合上节课学习的组件基础知识，强调Swiper与Tabs是实现页面动态交互的核心组件，前者用于轮播展示，后者用于导航切换，引出本节课学习重点。3.目标明确：告知学生本节课将掌握两种组件的属性配置与实操应用，能够独立实现主页面的动态切换功能。 结合实际APP交互效果，激发学生实操兴趣。二、核心组件知识点讲解（35分钟）知识点一：Swiper组件的使用（15分钟）1.概念与适用场景：讲解Swiper组件是容器类组件，用于实现页面/元素的横向/纵向滑动切换，典型场景包括轮播图、引导页，强调其“子组件即页面”的核心特性。2.关键属性解析：（1）基础属性：index（初始页面索引）、autoPlay（是否自动播放）、loop（是否循环）、interval（自动播放间隔）、indicator（是否显示指示器）；（2）方向与动画：vertical（滑动方向）、duration（切换动画时长）；结合表格对比属性默认值与效果，通过DevEcoStudio实时演示“开启/关闭autoPlay”“显示/隐藏indicator”的差异。3.事件绑定：讲解onChange事件（滑动切换时触发，返回当前索引）、onClick事件（点击当前页触发），演示如何通过事件实现索引打印与页面跳转。4.代码演示：创建简单轮播图示例，包含3张图片，配置自动播放、循环、指示器属性，绑定点击事件，让学生直观感受组件用法。知识点二：Tabs组件的使用（20分钟）1.结构组成：讲解Tabs组件由TabContent（内容页）和TabBar（导航栏）组成，核心是“导航选项与内容页一一对应”，展示顶部/底部/侧边导航的不同布局效果。2.关键属性与控制器：（1）核心属性：barPosition（导航栏位置）、index（默认选中索引）、scrollable（是否可滑动导航）、vertical（是否纵向布局）；（2）控制器（TabsController）：用于手动控制导航切换，演示如何创建控制器并绑定到Tabs组件。3.内容页与导航栏绑定：演示TabContent的创建方法，通过.tabBar()绑定导航文本，讲解“一个TabContent对应一个导航选项”的逻辑，展示导航栏选中状态的默认样式。4.代码演示：创建底部导航栏示例，包含3个导航选项与对应内容页，配置选中状态字体颜色，演示导航切换与内容页联动效果，强调布局嵌套时的尺寸适配（宽高设置为100%）。 分组件模块化讲解，边演示边实操，强化属性记忆与逻辑理解三、综合实操与难点突破（25分钟）1.分组任务：将学生分为4-5人小组，完成“轮播图+底部导航栏”综合案例，要求：（1）轮播图：3张图片、自动播放（间隔3秒）、循环、显示指示器；（2）底部导航栏：3个选项（“首页”“消息”“我的”）、绑定内容页；（3）基础交互：轮播图点击跳转，导航栏选中样式变化。2.难点指导：（1）轮播图指示器样式调整：指导学生通过自定义指示器组件修改颜色、大小；（2）导航栏选中状态：讲解通过判断index值动态设置字体颜色与粗细；（3）布局嵌套问题：强调Tabs组件与内容页的宽高需设置为100%，避免内容截断。3.教师巡视：实时解答学生遇到的属性配置错误、事件绑定失效等问题，针对共性问题集中讲解。 分组协作完成综合案例，在实践中突破难点四、成果展示与课堂总结（10分钟）1.成果展示：邀请2-3组学生展示项目效果，演示轮播图自动切换、导航栏跳转功能，师生共同点评，纠正属性配置不当、样式不统一等问题。2.总结回顾：（1）Swiper核心：属性控制轮播规则（自动、循环、指示器），事件实现交互；（2）Tabs核心：导航栏（TabBar）与内容页（TabContent）绑定，控制器实现手动切换；（3）关键注意点：组件宽高适配、属性默认值、事件回调逻辑。 通过成果展示强化实操记忆，梳理知识框架五、作业布置（10分钟