Ionic项目实战 (2)教学课件

1、企业级卓越人才培养（信息类专业集群） 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标 学习目标学习目标010203了解Ionic的CSS组件掌握Ionic列表掌握Ionic使用轮播图的步骤学习目标 通过Dancer时代主界面模块的实现，了解主界面的设计理念及功能实现，学习Ionic相关组件及如何应用列表实现布局，掌握Ionic使用轮播组件实现主界面模块的轮播，具有使用Ionic组件实现主界面布局的能力。04使用Ionic组件实现主界面布局的能力企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学

2、习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群） 情境导入情境导入对于一款手机软件，其主界面是非常重要的，可以说它是直接影响软件用户数量的关键。所以界面设计人员Ellison在主界面的设计和美化上花了很大的心思，他在设计主界面时不仅考虑到软件信息的宣传还考虑了用户使用软件的便利性，所以Ellison在界面中添加了手机软件中常用的轮播图元素。主界面中还有视频和音乐的推荐功能，点击跳转对应界面可进行视频和音频的播放。本模块主要通过实现Dancer时代的主界面了解

3、Ionic的轮播图和导航组件。企业级卓越人才培养（信息类专业集群） 功能描述功能描述使用选项卡组件实现页面的切换 01 02 03使用Ionic图标丰富APP页面使用列表组件实现页面的布局企业级卓越人才培养（信息类专业集群） 基本框架基本框架企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能01020304任务技能Ionic的CSS组件导航组件Ionic列表Ionic功能Ionic字体图标1按钮2Ionic表单3ionIcons采用了TrueType字体实现图标样式，有超过700个图标可供选择。 Ionic的的CSS组件组件企业级卓越人才培养（信息类专业集群）建设制造强国12选项

4、卡通过ion-tabs标签定义，选项使用ion-tab（ion-tab是ion-tabs的子标签，每个选项卡的选项都包含一个相对应的界面）标签定义。Ionic提供的侧边菜单通过点击带有menuToggle元素的标签，从当前界面的侧面滑入的导航，默认情况下从左侧划入，通过设置side=right实现从右侧滑入。 导航组件导航组件Ionic选项卡Ionic侧栏菜单企业级卓越人才培养（信息类专业集群）基本列表1列表分隔符2滑动列表3列表分隔符可以用来将列表划分成多个列表组，好处是使浏览者更方便查询列表项。其实现方法是使用标签作为列表容器，通过标签将列表划分为多个部分。滑动列表通过向左或向右滑动，以显

5、示一组隐藏的按钮。通过在ion-list组件内添加ion-item-sliding组件实现滑动列表，添加标签包含滑动出的按钮。Ionic列表列表企业级卓越人才培养（信息类专业集群）默认情况下，基本列表之间有分隔线，若要隐藏列表项之间的分隔线，只需在标签内添加no-lines属性。Ionic卡片1轮播组件2数据查询3代码结构由轮播图容器（标签）和轮播图组件（标签）组成在Ionic项目中，当列表数据过多时，要找一条特定的记录就尤为困难，这时数据查询功能就可以用到。其实现需要调用getItems()方法，调用该方法的触发类型有三种。Ionic功能功能企业级卓越人才培养（信息类专业集群）近年来卡片在前

6、端设计使用越来越频繁，卡片具有内容显示分层次、更加规整等特点，它是一个更好组织信息展示的工具。在设计移动端应用时，卡片会根据屏幕大小自适应大小。05 05 任务实施任务实施输入标题输入标题输入标题第一步：创建选项卡、首页、上传、分享、我的界面并配置第二步：首页轮播图的制作第三步：轮播图下方图标区域制作第四步：底部列表的制作，并添加页面跳转点击输入说明文字点击输入说明文字点击输入说明文字 任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务总结任务总结任务描述任务描述 本项目通过对Dancer时代主界面模块的学习，对Ionic相关组件及应用列表布局的使用具有初步了解，对Ionic相关的导航及菜单栏的使用有所认识，同时掌握了Ionic使用组件实现主界面的布局和美化。 任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板：