待花开花谢的博客

注释或者删除main.css中的以下代码.action-sheet-md .action-sheet-container { padding: .8rem 0; background: #fafafa;}.action-sheet-md .action-sheet-title { padding: 11px 16px 17px; font-size: 1.6rem; text-

因为我们使用命令创建的项目是基于ionic2，我们首先要使用ionic3的新特性Lazy Loading就必须对我们的项目进行更改。下面就以修改home页为例。第一步：移除app.module.ts中declarations, entryComponents的 HomePage，并移除import { HomePage } from '../pages/home/home'这一项;第二步:在home

一般的loading组件在官方提供下没有说明怎么去动态改变content内容，所以不容易实现进度条的效果。一般代码 let loading = this.loadingCtrl.create({ spinner: 'hide', content: '...' }); loading.present();为实现加载进度的效果其实官方提供了方法的，只需要通过

在Ionic2项目结构解析中，我们知道在 src/app/app.component.ts 初始化项目，因此我们可以在这里监听Android返回按键，实现双击退出应用。Ionic2 Platform中提供了监听返回按键的API registerBackButtonAction(callback, priority)， 参数 类型 描述 callback Function 返回键

在我使用ionic提供的最新slides组件的时候，在使用autoplay等属性的时候 <ion-slides autoplay="3000" loop=true pager=true > <ion-slide *ngFor="let slides_image of slides_images" > <img src="{{slides_image.im

瀑布流布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局一般使用在网页中，在移动端用的比较少但是也不可缺。下面就介绍一下如何在ionic3中使用瀑布流布局。 首先创建一个项目，这里不多做介绍。我们用about这个模块来进行瀑布流的开发。 这里先介绍一下实现的流程： 我们先要定义一个contain

在使用ionic3的过程中，我们可以使用angularjs的组件特性进行组件的自定义开发，对一些特定条件下的需求开发对应的组件。下面我们就通过自定义组件来实现图片的懒加载效果。当我们需要加载的图片很大，但是我们又不愿意做压缩让图片失真，所以我们需要使用图片的懒加载效果。实现流程首先新建一个img-lazy-load组件：ionic g component img-lazy-load会在src目录下生

在前面写了一篇文章是关于在ionic中使用iconfont的，但是在实际的开发过程中会发现，前端设计的很多图标都是png或者jpg的，无法像使用字体图标一样进行使用。 但是我们一般使用png这样的图标的时候都是使用img标签或者是某标签给它加上background-image的方式。 如果我们想要像使用字体图标那样使用png图标我们可以按照下面的方式操作。比如我们要自定义一个load图标 先在

在ionic中实现透明导航栏非常简单，主要用到三个属性:1、no-border2、transparent3、fullscreen先来看看效果图： 实现代码：<ion-header no-border>//加入no-border让header无边框 <ion-navbar transparent>//加入transparent让header透明 <ion-title>

在ionic2的service中使用http请求数据返回一个Promise： 首先在项目路径下执行ionic g provider HomeService，会在项目的中生成一个providers的文件夹，里面会生成一个home-service.ts文件。 然后在你要在使用用service的component中注入HomeService,例如在home.ts中import {HomeService

在ionic2中使用自定义图标，如iconfont（阿里巴巴矢量图标）。 先在http://www.iconfont.cn/ 中找到自己需要的图标，然后将图标加入购物车，然后下载该图标。 下载完成后解压，打开文件demo_unicode.html可以看到它提供的使用方法，我们在ionic2中按照以下方法使用： 1、在项目的assets目录下新建fonts文件夹，然后将下载解压后的iconf

ionic2中实现sticky功能，在ios中使用的是position:sticky属性，但是这个属性在大部分的浏览器中并不支持，android浏览器也一样不支持。在安卓中使用fixed属性。 我在做这个功能的时候花了大量的时间，主要还是因为对ionic2的不熟悉造成的。下面给出我的爬坑之路。 第一坑：使用Directive 理论上来说使用directive是最好的方法，但是本人实力有限实

在ionic2中使用极光提供的jmessage进行即时聊天，由于极光官方没有像jpush那样提供cordova插件，而我们为了简便就不去将jmessage封装成cordova的插件而是使用jmessage提供的web sdk进行即时聊天的开发。由于在ionic2中使用jquery这样的三方类库将不再像在ionic1中那样简单，而是提供了一个typings的库。它可以将js库生成对应的文件，然后通过t

在ionic2中使用高德地图需要我们在高德地图的开发者平台申请使用web JavaScript API的key。然后进行以下步骤使用进行地图的开发，这里我说说为什么我没有使用百度地图。 最开始我是采用的百度地图，但是在使用的过程中发现在使用百度自己封装的一些参数的时候会各种应用不成功，就比如说marker.setAnimation(BMAP_ANIMATION_BOUNCE);中的BMAP_ANI

通过direction可以控制页面是从左往右还是从右往左 goPage( ) { this.nav.push(Page,{},{animate: true, direction: ‘back’}); } goBack() { this.nav.pop({animate: true, direction: ‘forward’}) } 配置属性 ios默认值 md

ionic2中的form表单是验证方式是基于angular2的form验证，在angular2的form经过更新后，从以前的import { FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES } from '@angular/common';更新成了从forms中引入import { FormBuilder, Valida

熟悉ionic1和angular1的用户对于使用cordova都有一定的认识，但是在ionic2中官方给出的使用方法是从ionic-native这个npm包导入要使用的cordova插件。 例如： 使用ionic-native提供的AppVersion插件 首先安装插件： ionic plugin add cordova-plugin-app-version 然后通过以下代码即可获取到AP

在ionic2中没有提供像ionic1中的constant那样的方法去管理全局变量。但是在ionic2中可以通过以下方式进行全局变量的管理： 在app目录下新建app.config.ts文件,并新建类AppConfig,在类里面创建静态方法export class AppConfig { //测试环境URL public static getDebugUrl() {

Web应用程序的安全涉及到很多方面。针对常见的漏洞和攻击，比如跨站脚本攻击，Angular提供了一些内置的保护措施。为了系统性的防范XSS问题，Angular默认把所有值都当做不可信任的。 当值从模板中以属性（Property）、DOM元素属性（Attribte)、CSS类绑定或插值表达式等途径插入到DOM中的时候， Angular将对这些值进行无害化处理（Sanitize），对不可信的值进行编码。

ionic2中为ToastController加上提示图片，方法如下： 第一步：修改node_modules\ionic-angular\components\toast\toast-component.js 找到'<div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div> ' 修改为'<di

ionic2为我们提供了一个非常好的组件叫segment，一般的使用是没有问题的但是我们如果想要给segment加上一个可以滑动的事件的时候就会遇到一些问题，以下就是个人见解。 在ionic2中使用swipe的时候，没有像1中那样提供左滑还是右滑，而是使用的$event事件。这样就为我们处理左滑还是右滑带来麻烦，但是如果我们使用过HammerJS 的话我们就知道HammerJS 中处理事件是通过e