ionic项目在实际运行中，页面切换过渡动画卡顿真是一个头痛的问题，之前我讲过通过禁用动画的方式来解决卡顿，那种方法非常简单，但那是一种委屈求全的方法，更好的方法是我们自定义页面切换的动画来覆盖掉系统默认的动画，这样既能解决问题，有不失美观。 操作步骤 一、创建动画文件 首先在我们项目的app目录下新建一个名为animations的文件夹来存放我们的动画文件。紧接着在这个目录下右键新建一个名为nav-animations.ts的文件，当然了，文件的名字你可以随意。接下来就打开这个文件，编…
ionic项目一大过后，页面之间的切换动画就会卡顿，页面设计的色彩如果搭配得好，基本看不出来有什么问题，如果你像我一样，一个二个页面之间得色彩差距很大，那么在页面切换时的卡顿一下就露馅儿了。此时我们可以通过禁用页面切换动画来解决卡顿的问题，这是一种委曲求全的方法。 一、全局禁用： 慎用！选用此种方法，你的项目所有动画都会被禁用掉，包括一些依赖动画的功能也会受影响。比如“加载中...”的那种转圈动画也会受影响。在app.module.ts文件中做如下改动： IonicModule.forRoot({an…
在移动端的项目里面，比如商城项目，大都有可以横向滑动的产品卡片，在Ionic里面，我们可以使用纯html加css来实现这样的功能。 操作步骤 我就直接上代码吧，代码拿过去一看就懂了，相比之前老师教我的用ul,li的方式还要去计算列表的宽度，简单多了。 html代码： <ion-header> <ion-toolbar> <ion-title>product-list</ion-title> </ion-toolbar> <…
路由守卫是Angular中非常重要且实用的概念，它常用来拦截未登录用户去访问需要登录的界面，或者用户在填完一个表单忘了保存就退出的时候提示用户。 操作步骤 创建路由守卫 使用下面的命令来创建一个名字叫做login的路由守卫，放在了guards文件夹下，这个文件夹会自动创建，顾名思义，我用它来拦截未登录用户访问某些页面。 ionic g guard guards/login 然后找到login.guard.ts进行编辑 import { Injectable } from '…
在尝试了ionic的几种本地存储方案以后，综合对比之后，我最终还是回到了nativestorage的怀抱。 操作步骤 首先要安装插件： # 下载cordova插件 ionic cordova plugin add cordova-plugin-nativestorage # 安装ionic的原生支持插件并保存到package.json文件中 npm install @ionic-native/native-storage --save 然后就是使用： 在需要使用的页面的ts文件中，首先导…
整个春节都没有更新博客，今天已经开工了，博客也要开始更新起来了。这篇文章主要就把前段时间遇到的各种技术问题做一个汇总，因为遇到的都是些小问题，单独写一篇也不够。 一、ionic给ion-item设置内边距 ionic自带的ion-item组件很好用，但是很多时候我们都要按照设计稿上的边距来进行设计，经过多番尝试我发现，如果我们要去掉ion-item的左右内边距要用下面的代码才行： ion-item{ --padding-start: 0; --inner-padding-end: 0; } &…
要在Ionic项目里面实现一些复制或者粘贴的功能，比如点击“复制”按钮，就复制订单号这样的功能，是非常常见的，我们可以使用cordova的插件来实现。首先安装插件。 操作步骤 一、安装 分别执行下面的命令两行命令安装插件。 ionic cordova plugin add cordova-clipboard npm install @ionic-native/clipboard 安装好以后，找到app.module.ts文件，在文件头部区域引入Clipboard： import { Cl…