新建项目选择模板首先我们打开DevEco Studio，新建项目，选择wearable和Empty feature ability(java)如图所示->点击next输入项目名称我们在下一页中project name填hello->点击next新建样式在hello-entry-src-main-resources-base右击新建一个Directoy，如图所示将新的directory名

对于

准备首先我们在项目中使用ionic g page datetime创建一个测试日期组件的页面然后，在tab1页面创建一个用于跳转到这个页面的按钮<ion-button [routerLink]="['/datetime']">跳转到datetime页面</ion-button>关于日期组件的使用可以参考文档https://ionicframework.com/docs/ap

这里写目录标题前言普通列表新建页面并展示带箭头的列表line分组列表ion-item-divider列表中带图标ion-icon列表中带头像ion-avatar列表中的图片ion-thumbnail滑动列表组件ion-item-sliding、ion-item-options等前言在ionic前端开发中，我们常常需要使用列表组件来实现列表的功能，而ionic就很好的包装了一组列表组件用于实现列表的

前言要实现一个页面弹出另一个页面我们需要用到modal，参考资料：https://ionicframework.com/docs/api/modal下面我们用实际案例来验证这个功能准备新建modal页面ionic g page modal新建login组件ionic g component modal/components/login在tab1页面新建按钮链接到modal<ion-butto

这里写目录标题参考文档准备新建页面图片准备简单轮播图实现实现自动轮播的功能定义参数界面上使用该参数自动轮播干扰时停止问题的解决定义名称#slide引入ViewChild获取slide对象实现点击结束自动轮播实现点击按钮上下轮播图切换参考文档对于轮播图的实现，我们可以参考https://ionicframework.com/docs/api/slides的相关文档，这里有属性：事件：方法：准备新建页

文章目录准备搜索框组件searchbar普通搜索框功能动态搜索框 animated输入类型color颜色搜索框防抖动debounce分段器组件segment定义双向绑定值切换页面切换准备首先使用ionic g page searchbar 和ionic g page segment生成两个页面用于测试搜索框组件和分段器组件然后在tab1页面新建连个按钮用于链接到这两个页面tab1.page.htm

这里写目录标题准备新建页面跳转创建表单信息的JSON字符串页面创建list页面展示peopleInfo单行文本框ion-input开关ion-toggle单选按钮组 ion-radio-group 、ion-radio多选按钮ion-checkbox下拉框ion-select、ion-select-option多行文本框 ion-textarea准备新建页面首先，我们项目中新建页面form如下：跳

文章目录上拉菜单actionSheet 的使用新建页面新建按钮并添加点击事件ts中引入ActionSheetController并声明定义showAction方法不同平台显示效果Toast 提示框新建页面新建按钮并添加点击事件ts中引入ToastController 并声明ts中新建相应方法loading加载样式新建页面新建按钮并添加点击事件ts中引入loadingController并声明ts中

文章目录准备普通路由跳转路由跳转传值数值传递数值获取NavController 返回上一页使用NavController的back方法实现返回多次跳转返回问题及解决问题解决多个页面跳转到同一个页面的返回问题及解决问题返回到根准备我们在cmd中使用ionic start ionicdeme08 tab新家一个tab类型的项目普通路由跳转普通的路由跳转我们只需要用到routerLink就可以了首先我们