【ionic】- 组件使用-手势事件

组件虽然不同，可是在使用的时候基本相似，今天就以手势事件为例，总结下关于组件使用的流程与操作；

流程一览：

• 引入
• 构造函数声明
• 看文档，复制代码-写方法
• 修改完善-改为自己需要的信息和名称

PS:不同平台的表现 mode:‘ios’ //修改平台

手势事件：

手势事件可单独使用也可以和其他组件配合使用，此处采用的是和Alter事件一起使用；

1、安装hammerjs

npm install hammerjs --save
cnpm install hammerjs --save

2、在项目中src/main.ts中引入hammerjs

import 'hammerjs' ;

3、构造函数声明：

constructor(public alertController: AlertController) {}  //配合alter使用

4、写代码-方法

HTML中代码：
<ion-header>
  <ion-toolbar>
    <ion-title>gestures</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (tap)="doTap()">
    点击事件
 </ion-button>

 <ion-button (press)="doPress()">
    长按事件
</ion-button>

export class GesturesPage implements OnInit {

  constructor(public alertController: AlertController) {}

  ngOnInit() {
  }

  doTap() {
    console.log('tap tap...');
  }

  async doPress() {
    const alert = await this.alertController.create({
      backdropDismiss: false,
      header: '提示',
      message: '确定要删除吗?',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: '确认',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });
    await alert.present();
  }
}

5、效果演示：