![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ionic5
文章平均质量分 79
前进道路上的程序猿
喜欢唱歌,热爱运动
展开
-
ionic5 路由跳转、跳转传值、返回上一页、返回到根
文章目录准备普通路由跳转路由跳转传值数值传递数值获取NavController 返回上一页使用NavController的back方法实现返回多次跳转返回问题及解决问题解决多个页面跳转到同一个页面的返回问题及解决问题返回到根准备我们在cmd中使用ionic start ionicdeme08 tab新家一个tab类型的项目普通路由跳转普通的路由跳转我们只需要用到routerLink就可以了首先我们新建一个页面ionic g page pinfopinfo.page.html:<io原创 2021-05-16 12:05:50 · 2055 阅读 · 0 评论 -
ionic5 ion-refresher下拉更新
前言在现实应用中,我们需要有上拉更新,通过上拉的操作触发请求事件,请求最新的数据进行加载,这里我们使用到的组件就是ion-refresher,参考资料如下:https://ionicframework.com/docs/api/refresher接下来,我们就从案例中来学习这样一个组件使用新建项目cmd中我们使用ionic start ionicdemo7来新建项目页面新建列表我们在ts中新建一个数组,并予以赋值,然后在页面中显示出来tab1.page.ts:tab1.page.原创 2021-05-15 22:29:39 · 245 阅读 · 0 评论 -
ionic5 实现请求数据以及上拉加载更多功能
get请求数据Angular5.x以后get、post和服务器交互使用的是HTTPClientModule模块,所以首先我们需要引入HttpClientModule模块在app.module.ts中引入HttpClientModule并注入app.module.ts:引入HttpClientModule注入HttpClientModule新建get请求的service服务我们把实现get请求的功能整合到一个service里面,然后需要用到get请求的时候调用service相应的方法新建s原创 2021-05-15 18:42:24 · 376 阅读 · 2 评论 -
ionic5 上拉分页加载更多ion-infinite-scroll
在我们使用软件的时候,尤其是列表类型,常常一次性不会展示所有的内容,只有当我们上拉到最底下的时候生成转圈动态图,同时会发送请求数据,从而显示更多的信息,这时候就需要用到上拉分页加载跟多的组件ion-infinite-scroll参考资料https://ionicframework.com/docs/api/infinite-scroll下面我们在利用案例来实现这一功能准备新建项目我们使用ionic start ionicdemo06创建项目新建列表我们首先在ts中新建list数组变量,然原创 2021-05-14 21:07:10 · 484 阅读 · 3 评论 -
ionic5 中一个页面弹出另一个页面以及页面间的传值
前言要实现一个页面弹出另一个页面我们需要用到modal,参考资料:https://ionicframework.com/docs/api/modal下面我们用实际案例来验证这个功能准备新建modal页面ionic g page modal新建login组件ionic g component modal/components/login在tab1页面新建按钮链接到modal<ion-button [routerLink]="['/modal']"> 跳转到模态对话原创 2021-04-30 22:42:09 · 348 阅读 · 2 评论 -
ionic5中手势相关事件的使用
文章目录前言准备使用tap(点击)、press(按下)安装hammerjs在项目的src/main.ts中引入hammerjs在app.module.ts中引入HammerModule测试前言ionic5中的gestures手势事件包括:tap(点击)、press(按下)、pan(随着手指移动)、swipe(随着手指迅速移动)、rotate(旋转)、pinch(缩放)等准备首先我们在项目中新建一个页面用于演示手势的运用ionic g page gestures在tab1中新建按钮链接到ges原创 2021-04-28 21:41:56 · 569 阅读 · 2 评论 -
ionic5中actionSheet、toast、alert、loading等的使用
文章目录上拉菜单actionSheet 的使用新建页面新建按钮并添加点击事件ts中引入ActionSheetController并声明定义showAction方法不同平台显示效果Toast 提示框新建页面新建按钮并添加点击事件ts中引入ToastController 并声明ts中新建相应方法loading加载样式新建页面新建按钮并添加点击事件ts中引入loadingController并声明ts中新建相应方法alert弹窗新建页面新建按钮并添加点击事件ts中引入AlertController并声明ts中新建原创 2021-04-27 22:38:59 · 898 阅读 · 0 评论 -
ionic5 中组件内置颜色、自定义组件样式
准备我们使用ionic start ionicdemo04来新建一个项目我们使用ionic g page button来创建一个页面来测试内置颜色和自定义组件样式项目结构如下:接下来我们就在tab1页面上定义一个按钮用于跳转到button页面tab1.page.html<ion-button [routerLink]="['/button']"> 跳转到button页面</ion-button>默认颜色的使用ionic中有很多内置颜色可供选择,省去了原创 2021-04-24 09:47:09 · 778 阅读 · 0 评论 -
ionic5 侧边栏ion-menu组件以及底部tabs结合侧边栏ion-menu
文章目录说明侧边栏ion-menu组件的基本使用新建项目侧边栏ion-menu使用点击菜单按钮弹出侧边栏侧边栏ion-menuJS实现侧边栏打开功能页面加按钮给ion-menu定义menuId属性控制菜单的页面中引入MenuController 组件初始化构造函数对应方法中通过JS控制侧边栏底部tabs结合侧边栏ion-menu新建tab项目新建页面新建侧边栏给侧边栏菜单添加链接并使其点击后侧边栏关闭说明对于侧边栏的相关的相关使用可以参考文档https://ionicframework.com/docs原创 2021-04-22 22:12:47 · 801 阅读 · 0 评论 -
ionic5 中的日期组件ion-datetime
准备首先我们在项目中使用ionic g page datetime创建一个测试日期组件的页面然后,在tab1页面创建一个用于跳转到这个页面的按钮 <ion-button [routerLink]="['/datetime']"> 跳转到datetime页面 </ion-button>关于日期组件的使用可以参考文档https://ionicframework.com/docs/api/datetime日期组件默认样式我们在页面上使用ion-datetime原创 2021-04-20 21:57:52 · 1760 阅读 · 0 评论 -
ionic5 中搜索框组件searchbar和分段器组件segment
文章目录准备搜索框组件searchbar普通搜索框功能动态搜索框 animated输入类型color颜色搜索框防抖动debounce分段器组件segment定义双向绑定值切换页面切换准备首先使用ionic g page searchbar 和ionic g page segment生成两个页面用于测试搜索框组件和分段器组件然后在tab1页面新建连个按钮用于链接到这两个页面tab1.page.html:<ion-button [routerLink]="['/searchbar']">原创 2021-04-12 21:58:40 · 440 阅读 · 0 评论 -
ionic5中轮播图ion-slides、ion-slide的使用
这里写目录标题参考文档准备新建页面图片准备简单轮播图实现实现自动轮播的功能定义参数界面上使用该参数自动轮播干扰时停止问题的解决定义名称#slide引入ViewChild获取slide对象实现点击结束自动轮播实现点击按钮上下轮播图切换参考文档对于轮播图的实现,我们可以参考https://ionicframework.com/docs/api/slides的相关文档,这里有属性:事件:方法:准备新建页面首先我们在项目中使用ionic g page slides命令来创建一个用于展示轮播图的页面原创 2021-04-11 09:40:43 · 1636 阅读 · 1 评论 -
ionic5 表单相关组件(单行文本框、开关、多选按钮、下拉框、多行文本框)
这里写目录标题准备新建页面跳转创建表单信息的JSON字符串页面创建list页面展示peopleInfo单行文本框ion-input开关ion-toggle单选按钮组 ion-radio-group 、ion-radio多选按钮ion-checkbox下拉框ion-select、ion-select-option多行文本框 ion-textarea准备新建页面首先,我们项目中新建页面form如下:跳转接下来我们在tab1中新建按钮跳转只form页面<ion-button [routerLi原创 2021-04-09 21:14:44 · 1185 阅读 · 0 评论 -
ionic5列表组件
这里写目录标题前言普通列表新建页面并展示带箭头的列表line分组列表ion-item-divider列表中带图标ion-icon列表中带头像ion-avatar列表中的图片ion-thumbnail滑动列表组件ion-item-sliding、ion-item-options等前言在ionic前端开发中,我们常常需要使用列表组件来实现列表的功能,而ionic就很好的包装了一组列表组件用于实现列表的功能,ionic中的列表组件主要是ion-list、ion-item等组件,下面我们就利用代码来看一下是具体原创 2021-03-30 22:44:32 · 955 阅读 · 0 评论 -
ionic 按钮、导航等组件的使用
这里写目录标题ionic5中内置颜色介绍使用按钮expand设置按钮的宽度fill设置背景填充size设置按钮的大小mode 决定使用哪种平台样式按钮结合图标导航组件简介使用ionic5中内置颜色介绍首先介绍下ionic 5 内置颜色 可用在按钮、图标、导航等这些颜色的配置是在src\theme\variables.scss下使用在src\app\tab2\tab2.page.html下,我们新建一个按钮,配置其color="success"如下:最后在页面上表现的形式如下:按钮首原创 2021-03-27 18:56:29 · 443 阅读 · 0 评论 -
ionic5自定义公共模块
创建公共模块以及组件创建模块ionic g module module/slide创建组件ionic g component module/slideslide.module.ts中引入、声明组件和暴露组件src\app\module\slide\slide.module.ts:使用公共模块tabs1中应用和声明模块src\app\tab1\tab1.module.ts:tabs1中使用模块src\app\tab1\tab1.page.html我们可以看到tabs1页原创 2021-03-27 11:21:55 · 145 阅读 · 0 评论 -
ionic新增tbas页面
新建页面ionic g page tabs删除路由在src\app\app-routing.module.ts下将tab4路由删除在tabs下配置tabs4的路由src\app\tabs\tabs-routing.module.ts:新建tabs4的切换按钮在tabs页面中新建tabs4的切换按钮src\app\tabs\tabs.page.html:打开页面,我们可以看到新的tabs4页面如下:如果想要更换图标,可以去网站:https://ionicons.com/寻找原创 2021-03-27 10:55:12 · 93 阅读 · 0 评论 -
ionic5创建页面以及页面跳转功能
创建项目首先,在cmd中进入工作空间,再利用命令新建项目ionic start demo1 tabs新建页面进入demo1目录cd demo1利用命令创建页面ionic g page news实现页面跳转功能利用Visual Studio Code打开项目项目中我们可以在src-app下可以看到新建的news页面还可以看到在src\app\app-routing.module.ts下有自动配置了相应的路由实现页面跳转我们在tab1.page.html下新建一个按钮,在按原创 2021-03-27 10:22:22 · 494 阅读 · 0 评论 -
ionic5混合app开发环境配置以及项目和调试apk生成
文章目录JDK安装1.JDK的下载JDK的安装JDK环境变量配置ANDROID SDK安装Android sdk安装包下载安装配置ANDROID环境变量nodejs安装下载安装安装GIT下载安装gradle配置ionic和cordova的安装新建项目创建启动项目配置平台ionic5混合App开发环境的配置需要安装JDK、Android SDK、NodeJS、以及GIT等,如果不想麻烦去官网下载,可在https://download.csdn.net/download/u010574271/15781729原创 2021-03-14 12:51:37 · 1149 阅读 · 0 评论