ionic项目在实际运行中,页面切换过渡动画卡顿真是一个头痛的问题,之前我讲过通过禁用动画的方式来解决卡顿,那种方法非常简单,但那是一种委屈求全的方法,更好的方法是我们自定义页面切换的动画来覆盖掉系统默认的动画,这样既能解决问题,有不失美观。 操作步骤 一、创建动画文件 首先在我们项目的app目录下新建一个名为animations的文件夹来存放我们的动画文件。紧接着在这个目录下右键新建一个名为nav-animations.ts的文件,当然了,文件的名字你可以随意。接下来就打开这个文件,编…
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…
COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.
Theme Kratos Made By Seaton Jiang