Angular + Typescript + Hammerjs实现触摸手势简单测试

朴灿烈づ我的快乐病毒、 2022-05-16 07:41 168阅读 0赞

# Angular + Typescript + Hammerjs实现触摸 #

很基础很简单的测试，不对CSS，TS及其Angular结构不做深入的修饰和优化

参考链接：

*  *在 Angular 中使用 HammerJS (触摸手势)：[https://segmentfault.com/a/1190000009891161][https_segmentfault.com_a_1190000009891161]*

--------------------

### 实现结果 ###

![最终实现效果][70]

### 准备工作 ###

你需要安装hammerjs包：npm install hammerjs –save

### 一、Hammerjs兼容上下触摸 ###

默认hammerjs是没有开启上下触摸的功能的，所以你需要重新配置swipe的行为

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    import { AppComponent } from './app.component';
    
    import * as Hammer from 'hammerjs';
    
    // It is very common for developers to customize the behavior of mobile events. For instance,
    // you might want to enable swipeup and swipedown, which are disabled by default.
    export class MyHammerConfig extends HammerGestureConfig { 
      overrides = <any>{
        // override hammerjs default configuration
        'swipe': { direction: Hammer.DIRECTION_ALL  }
      };
    }
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule
      ],
      providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}],
      bootstrap: [AppComponent]
    })
    export class AppModule {  }

### 二、Index.html ###

<!doctype html>
    <html lang="en" style="margin: 0;padding: 0;width: 100%;height: 100%;">
    <head>
      <meta charset="utf-8">
      <title>MyProject</title>
      <base href="/">
    
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    </head>
    <body style="margin: 0;padding: 0;width: 100%;height: 100%;">
      <app-root></app-root>
    </body>
    </html>

### 三、main.ts ###

import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import 'hammerjs';
    
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    
    if (environment.production) {
      enableProdMode();
    }
    
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));

### 四、app.component.html ###

<div style="height: 100%;margin: 0;padding: 0;width: 100%;border:0;" (swipeup)="swipe($event.type)" (swipedown)="swipe($event.type)">
    
      
      <div style="position:absolute;top:50%;left:50%;height: auto;margin-left: -25px;" [style.margin-top.px]="top">
        <div style="width:50px;height:50px;background-color:coral;"></div>
        <div style="width:50px;height:50px;background-color:lightblue;margin:25px 0px 0px 0px;"></div>
        <div style="width:50px;height:50px;background-color:khaki;margin: 100px 0px 25px 0px;"></div>
        <div style="width:50px;height:50px;background-color:pink;"></div>
      </div>
      <div style="position:absolute;top:50%;left:50%;height: 80px;width:80px;margin-left: -40px;margin-top:-40px;" [style.background-color]="changeColor">
      </div>
    
      
      
    </div>

### 五、app.component.ts ###

import { Component } from '@angular/core';
    import { trigger, state, style, animate, transition} from '@angular/animations';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent { 
    
        direction = 'up';
    
        count = 0;
        top = -175;
        interval = 75;
        changeColor = 'lightgreen';
    
        SWIPE_ACTION = { UP: 'swipeup', DOWN: 'swipedown' };
    
        swipe(action = this.SWIPE_ACTION.UP) {
            if (action === this.SWIPE_ACTION.UP && this.count < 2) {
                this.count++;
                this.top -= this.interval;
                if (this.count === -1) {
                    this.changeColor = 'lightblue';
                }
                if (this.count === -2) {
                    this.changeColor = 'coral';
                }
                if (this.count === 0) {
                    this.changeColor = 'lightgreen';
                }
                if (this.count === 1) {
                    this.changeColor = 'khaki';
                }
                if (this.count === 2) {
                    this.changeColor = 'pink';
                }
            }
            if (action === this.SWIPE_ACTION.DOWN && this.count > -2) {
                this.count--;
                this.top += this.interval;
                if (this.count === -1) {
                    this.changeColor = 'lightblue';
                }
                if (this.count === -2) {
                    this.changeColor = 'coral';
                }
                if (this.count === 0) {
                    this.changeColor = 'lightgreen';
                }
                if (this.count === 1) {
                    this.changeColor = 'khaki';
                }
                if (this.count === 2) {
                    this.changeColor = 'pink';
                }
            }
        }
    }

[https_segmentfault.com_a_1190000009891161]: https://segmentfault.com/a/1190000009891161
[70]: /images/20220516/02c4376acc4f4fe98dc205126ae8b2e9.png