【ionic4】常用组件的使用

1、tab页面的切换

在ionic4中实现tab页面的切换需要借助segment组件，然后结合ngSwith来实现，具体实现如下：

<ion-header>
  <ion-toolbar>
      <ion-segment [(ngModel)]="tabs">
          <ion-segment-button value="tab1">
           <ion-label>商品列表</ion-label> 
          </ion-segment-button>
          <ion-segment-button value="pcontent" value="tab2">
              <ion-label>商品详情</ion-label>
          </ion-segment-button>
          </ion-segment>

  </ion-toolbar>
</ion-header>

<ion-content>
  
  <div [ngSwitch]="tabs">
  <div  *ngSwitchCase="'tab1'">
    商品图文信息
  </div>
  <div  *ngSwitchCase="'tab2'">
    商品详情
  </div>
  </div> 

  {{tab}}
</ion-content>

将tab放在toolbar中，通过点击不同的tab来显示不同页中的内容。

效果如下：

2、日期选择器

引入第三方模板把时间戳转化成 年-月-日的格式，应用一个模块首先需要安装它，在终端输入

npm i silly-datetime --save

然后引入

格式化日期的第三方模块
import sd from 'silly-datetime';

HTML代码：

<ion-list>
    <ion-item>
      <ion-label>汉化日期按钮</ion-label>
      <ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" picker-format="YYYY MM DD"
        [(ngModel)]="nowDay" (ionChange)="datetimeChanged($event)"></ion-datetime>
    </ion-item>
  </ion-list>

ts代码：

import { Component, OnInit } from '@angular/core';

import sd from 'silly-datetime'; // 引入第三方模块

// var sd = require('silly-datetime'); // 引入第三方模块
@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {
  day = '2019-02-14'
  public nowDay;
  constructor() {
    this.nowDay = sd.format(new Date(), 'YYYY-MM-DD');
  }
  ngOnInit() { }
  datetimeChange(e) {
    console.log(e);
  }

  //自定义option
  public customPickerOptions = {
    buttons: [{
      text: '取消',
      handler: () => console.log('Clicked 取消!')
    }, {
      text: '确认',
      handler: () => {
        console.log('Clicked 确认');
        return false;
      }
    }]
  }

}

3、侧边菜单栏

新建一个带tab的项目，如果想在现有的基础上添加侧边栏改如何做呢？

在app.component.html中添加侧边菜单：

<ion-app>
  <ion-menu menuId="first" side="start" type="overlay">
    <ion-header>
      <ion-toolbar>
        <ion-title>用户信息</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle>  //作用是每次点击侧边菜单中的子菜单后，侧边栏收缩
        <ion-item [routerLink]="['/news']">
          <ion-label>我的新闻</ion-label>
        </ion-item>
      </ion-menu-toggle>
      <ion-menu-toggle>
        <ion-item [routerLink]="['/products']">
          <ion-label>我的商品</ion-label>
        </ion-item>
      </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

项目启动时，默认显示的是tab1的页面，所以在tab1页面中加一个点击按钮，点击这个按钮就打开侧边栏

<ion-buttons slot="start">
  <ion-menu-button menu="first"></ion-menu-button>
</ion-buttons>

启动项目显示效果如下：