ionic3.x开发记录

组件使用篇

ion-navbar

  ion-navbar组件在定义上是做为导航栏使用，且附带一个回退按钮。在导航栏内可以包含标题，任意数量的按钮，片段或搜索栏。但该组件必须放置在<ion-header>中，以便将它们放置在内容的上方。在官方对该组件的注释中有这么一句话 – 'It's important to note that navbar's are part of the dynamic navigation stack.'，意思是导航栏是动态导航堆栈的一部分，因此如果想使用静态工具栏，可以使用ion-toolbar。

ionc-toolbar

  ion-toolbar组件做为一个静态工具栏，和ion-navbar不同的是，它可以在应用程序中用作标题，子标题，页脚或甚至子页脚的通用栏。当组件放置在<ion-header>或<ion-footer>内时，组件固定在其各自的位置上。当放置在<ion-content>内时，组件将随内容滚动。

ion-content

  ion-content是做为页面主体内容组件存在的，在视图组件中应当只有一个ion-content存在。这里主要记录下ion-content的滚动监听用法。

   Scroll events happen outside of Angular's Zones. This is for performance reasons. So if you're trying to bind a value to any scroll event, it will need to be wrapped in a zone.run()

  以上是官方对于滚动监听做出的解释，在出于性能方面的考虑，如果你试图绑定一个值到任何滚动事件，它将需要被包裹在一个zone.run（）方法中。现假如项目有个UI方面的设计，当视图发生滚动，顶部的navbar需要做出相应的渐变颜色，隐藏显示等动态效果变化。

import { Content } from 'ionic-angular';

export class ScrollPage {
    @ViewChild(Content) content: Content;

    constructor(public zone: NgZone) { }

    // 组件加载完成，对页面的滑动进行监听
    ionViewDidLoad() {
        this.content.ionScroll.subscribe(($event: any) => {
            this.zone.run(() => {
                // 当前滑动的距离
                let top = $event.scrollTop;
                // ... do something eg: change class/layout/hidden/display
            })
        })
    }
}

ion-slides

  ion-slides是一个幻灯片容器组件，和ion-slide幻灯片组件组合使用，容器内可以包含任意数量的幻灯片组件。这里主要讲解下常用属性和切换视图停止播放的问题。

  关于幻灯片停止播放的bug，主要有两个触发操作，一个是用户在拖拽滑动幻灯片时，幻灯片会停止播放；另一个则是在进入其他视图，包括tab页的切换，都会触发幻灯片停止播放。这里记录下相应的解决方案及代码。

<!-- slides.html -->
<ion-content>
    <!-- 监听幻灯片关闭自动播放事件 -->
    <ion-slides autoplay="3000" speed="300" loop (ionSlideAutoplayStop)="startAutoPlay()">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
    </ion-slides>
</ion-content>

// slides.ts
import { Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';

export class SlidesPage {

    @ViewChild(Slides) slides: Slides;

    // 进入当前视图时启动自动播放  
    ionViewDidEnter(){  
        this.startAutoPlay();  
    }  

    // 离开当前视图时停止自动播放  
    ionViewDidLeave(){   
        this.stopAutoPlay();  
    }  

    // 启动自动播放
    startAutoPlay(){
        this.slides.startAutoplay();
    }

    // 停止自动播放
    stopAutoPlay(){
        this.slides.stopAutoplay();
    }
}

Events使用篇

Events
   Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

  官方解释中Events是一套发布 - 订阅式事件系统，用于发送和响应应用程序级别的事件。在开发项目过程中，纠结于在回退的时候怎么传递选中的数据。网上有人将callback做为参数传递，虽然可以实现，但终究感觉不太美观。在翻阅文档的时候，发现了Events Api，通过发布-订阅事件完美的实现了需求。

/* 选择优惠券界面 */
import { Events  } from 'ionic-angular';

export class ConfirmOrderCouponPage {
    constructor(private events: Events) { }
}

// 使用优惠券
useCoupon() {
    // 回退至确认订单页面
    this.navCtrl.popTo("ConfirmOrderPage");
    // 通过ionic的Events通信传递选中的优惠券
    this.events.publish('order: use-coupon', this.selectCoupon);
}

/* 确认订单界面 */
import { Events } from 'ionic-angular';

export class ConfirmOrderPage {
    constructor(private events: Events) { }
}

ionViewDidLoad() {
    // 订阅选中优惠券事件
    this.events.subscribe('order: use-coupon', (coupon) => {
        this.coupon = coupon;
        console.log(this.coupon);
    });
}

更新于 2018.3.2，未完待续…