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

最新推荐文章于 2024-08-23 08:43:36 发布

BigLazyET

最新推荐文章于 2024-08-23 08:43:36 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/u010792238/article/details/81780197

版权

本文介绍了如何在Angular项目中结合Typescript和Hammerjs实现触摸手势，包括准备工作、配置Hammerjs以支持上下触摸，以及在Index.html、main.ts、app.component.html和app.component.ts中的具体实现步骤。

摘要由CSDN通过智能技术生成

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%;"

最低0.47元/天解锁文章

BigLazyET

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫