【ionic4】常用组件的使用

1、tab页面的切换

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

  
      
          
           商品列表 
          
          
              商品详情
          
          

  



  
  

  

    商品图文信息
  
  

    商品详情
  
  
 

  {{tab}}

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

效果如下：

2、日期选择器

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

npm i silly-datetime --save

然后引入

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

HTML代码：

    
      汉化日期按钮
      
    
  

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中添加侧边菜单：

  
    
      
        用户信息
      
    
    
      
          //作用是每次点击侧边菜单中的子菜单后，侧边栏收缩
        
          我的新闻
        
      
      
        
          我的商品
        
      
      
    
  
  

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

启动项目显示效果如下：