Angular + Typescript + Hammerjs实现触摸
很基础很简单的测试，不对CSS，TS及其Angular结构不做深入的修饰和优化
参考链接：
- 在 Angular 中使用 HammerJS (触摸手势)：https://segmentfault.com/a/1190000009891161
实现结果
准备工作
你需要安装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
<!-- app/app.component.html -->
<div style="height: 100%;margin: 0;padding: 0;width: 100%;border:0;"
(swipeup)="swipe($event.type)"
(swipedown)="swipe($event.type)">
<!-- 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效 [style.margin-top.px]="top"-->
<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>
<!-- loop each avatar in our avatar list -->
<!-- <div class="swipe-box" *ngFor="let avatar of avatars; let idx=index"
(swipeup)="swipe(idx, $event.type)"
(swipedown)="swipe(idx, $event.type)"
[class.visible]="avatar.visible"
[class.hidden]="!avatar.visible">
<div>
<img style="width:100px; height:100px;" [src]="avatar.image" [alt]="avatar.name">
</div>
</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';
}
}
}
}