ionic4 轮播图ion-slides，日期控件ion-datetime，侧边栏ion-menu

slide轮播图 依赖swiper

轮播基础

html中
<ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="sun()">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
 </ion-slides>
 <button (click)="slideChange()">
 ts中定义options
 slideOpts = {
    initialSlide: 1,
    speed: 400,    
    effect:'flip'  ,    轮播效果
    autoPlay:{delay:200}    延迟
    loop:true   循环轮播
  };
 

通过事件来控制轮播

import {ViewChild} from "@angular/core"
@ViewChild('slide1') slide1:any;
slideChange(){
   this.slide1.slideNext()   轮播到下一个
    this.slide1.slidePrev()  轮播到上一个
     this.slide1.update()    请求完成后 如果轮播图工作异常时调用更新
}
手动滑动后轮播图不自动滑动的解决办法
sun(){
   this.slide1.startAutoPlay()
}

日期控件 ion-datetime

时间控件基础

<ion-datetime display-format="YYYY-MM-DD HH:mm:ss" picker-format="YYYY-MM-DD" [(ngModel)]="data" (ionChange)="change()"></ion-datetime>
display-format="YYYY-MM-DD HH:mm:ss"    显示格式
picker-format="YYYY-MM-DD"              弹出格式
 [(ngModel)]="data"           双向数据绑定
  (ionChange)="change()"    时间改变时
  change(){console.log(e.detail.value)}

显示当前时间

public data
通过第三方模块格式化时间  silly-datetime 
npm i silly-datetime  --save
import sd from 'silly-datetime'
this.data = sd.format(new Date(),'YYYY-MM-DD')
或者直接js修改

汉化日期组件

<ion-datetime  display-format="YYYY-MM-DD"   [pickerOptions]="customPickerOptions" ></ion-datetime>
public customPickerOptions = {
    buttons: [{
      text: '取消',
      handler: () => console.log('Clicked Save!')
    }, {
      text: '保存',
      handler: () => {
        console.log('Clicked Log. Do not Dismiss.');      
      }
    }]
  }

侧边栏 ion-menu

新建带有侧边栏的项目
ionic start demo sidemenu

ionic start demo

blank:一个空白的启动项目
sidemenu：一个带有侧面菜单的起始项目，在内容区域中有导航
tabs：具有简单选项卡界面的启动项目

side="start/end"     位置
menuId      侧边栏的唯一标识
type="overlay/reveal/push"    弹出方式
swipe-gesture="true/false"    滑动弹出侧边栏

生成侧边栏相关代码
既有tab 又有menu 根组件配置 须在添加main 不然menu不显示

右侧侧边栏

<ion-menu side="end" type="push" menuId="end">
      <ion-header>
        <ion-toolbar color="danger">
          <ion-title>右侧</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

给侧边栏加按钮

<ion-buttons slot="end">  
   <ion-menu-toggle>
     <ion-menu-button menu="end" (click)="openSlideMenu()">  </ion-menu-button></ion-menu-toggle>
   </ion-buttons>
   ion-menu-toggle  点击之后menu会显示/隐藏

通过menuId=“end” 控制侧边栏

import { MenuController } from '@ionic/angular'; 

constructor(private menu: MenuController ) { }

openSlideMenu() {
    this.menu.open('end');
  }