[译] 在 Angular 中使用 HammerJS (触摸手势)
原文示例是针对 Angular 2 版本,经过测试,在目前最新的 Angular 4.x 版本中此教程依然适用,文章将以 Angular 来统一代称 Angular 2.x,Angular 4.x 版本 名词 swipe: 滑动; 和 pan 类似,但滑动更快速,无粘滞. swipeleft,swiperight,swipeup,swipedown: 左滑,右滑,上滑,下滑 carousel of avatars: 头像轮播 简介 我们将构建一个头像轮播,可以左滑或者右滑来查看每个头像,可以使用下面的地址测试一下(最好在手机上,但也可以通过 chrome 和 firefox 桌面浏览器来模拟手机测试) https://plnkr.co/edit/LCsiXOt... 应用配置 让我们看一下我们的目录结构是怎样的,我们有一个 app 目录文件夹,目录下包含了我们的头像切换和启动应用的 main.ts 文件 |- app/ |- app.component.html |- app.component.css |- app.component.ts |- app.module.ts |- main.ts |- index.html |- tsconfig.json APP 组件 让我们从 app 组件开始,在这个组件里,我们将定义头像列表和处理头像显示和隐藏的 swipe 事件. // app/app.component.ts import { Component } from '@angular/core'; @Component({ moduleId: module.id,selector: 'my-app',templateUrl: 'app.component.html',styleUrls: ['app.component.css'] }) export class AppComponent { // constant for swipe action: left or right SWIPE_ACTION = { LEFT: 'swipeleft',RIGHT: 'swiperight' }; // our list of avatars avatars = [ { name: 'kristy',image: 'http://semantic-ui.com/images/avatar2/large/kristy.png',visible: true },{ name: 'matthew',image: 'http://semantic-ui.com/images/avatar2/large/matthew.png',visible: false },{ name: 'chris',image: 'http://semantic-ui.com/images/avatar/large/chris.jpg',{ name: 'jenny',image: 'http://semantic-ui.com/images/avatar/large/jenny.jpg',visible: false } ]; // action triggered when user swipes swipe(currentIndex: number,action = this.SWIPE_ACTION.RIGHT) { // out of range if (currentIndex > this.avatars.length || currentIndex < 0) return; let nextIndex = 0; // swipe right,next avatar if (action === this.SWIPE_ACTION.RIGHT) { const isLast = currentIndex === this.avatars.length - 1; nextIndex = isLast ? 0 : currentIndex + 1; } // swipe left,previous avatar if (action === this.SWIPE_ACTION.LEFT) { const isFirst = currentIndex === 0; nextIndex = isFirst ? this.avatars.length - 1 : currentIndex - 1; } // toggle avatar visibility this.avatars.forEach((x,i) => x.visible = (i === nextIndex)); } } 笔记:
HTML VIEW <!-- app/app.component.html --> <div> <h4>Swipe Avatars with HammerJS</h4> <!-- loop each avatar in our avatar list --> <div class="swipe-box" *ngFor="let avatar of avatars; let idx=index" (swipeleft)="swipe(idx,$event.type)" (swiperight)="swipe(idx,$event.type)" [class.visible]="avatar.visible" [class.hidden]="!avatar.visible"> <div> <img [src]="avatar.image" [alt]="avatar.name"> </div> <div> <a class="header">{{avatar.name}}</a> </div> </div> </div> 笔记:
组件样式 可以使用 semantic-ui 轻松实现样式美化,但对于我们来讲是不必要的,跳过这个部分,下面是需要添加到组件中的自定义 CSS 类 .swipe-box { display: block; width: 100%; float: left; margin: 0; } .visible { display: block; } .hidden { display: none; } 笔记:
引入 HammerJS 脚本 现在已经完成了组件,开始设置 HammerJS,首先,需要把 HammerJS 脚本文件引入到主视图文件 index.html 文件中 <!-- index.html --> <head> ... <!-- Hammer JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script> .... </head> 默认情况下,桌面浏览器是不支持 touch 事件,HammerJS 有一个扩展叫 touch-emulator.js,提供一个调试工具来模拟实现 touch 支持,你可以像引入 hammer.js 那样引入它 <!-- index.html --> <head> ... <!-- Hammer JS Touch Emulator: Uncomment if for desktop --> <script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> <script> TouchEmulator(); </script> ... </head> 具体是如何模拟实现,可以查看 hammer.js 的官方文档 由于示例运行在 plunker,示例中引用了 HammerJS CDN URI,如果想本地管理,可以运行下面的命令. npm install hammerjs --save 然后,在项目中引入JS 文件 如果没有引入 HammerJS file,会有一个错误信息抛出: 'Hammer.js is not loaded,can not bind swipeleft event'. 应用程序模块 默认情况,如果没有任何自定义配置,就可以直接使用 HammerJS,Angular 支持 HammerJS 开箱即用,在应用启动时,不需要包含任何内容,您的应用程序模块看起来像下面这样 // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ],providers: [ ] }) export class AppModule { } 定制 HammerJS 如果你想增加一些自定义设置,像速度和阀值什么的,要怎么做呢? 快速说明
官方文档上有提供一些其它的自定义配置项 Angular 已经内置提供了一个叫做 HAMMER_GESTURE_CONFIG 的令牌,接受 HammerGestureConfig 类型的对象 简单的方式,可以继承 HammerGestureConfig 像下面这样 // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HammerGestureConfig,HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; import { AppComponent } from './app.component'; export class MyHammerConfig extends HammerGestureConfig { overrides = <any>{ 'swipe': {velocity: 0.4,threshold: 20} // override default settings } } @NgModule({ imports: [ BrowserModule ],providers: [ { provide: HAMMER_GESTURE_CONFIG,useClass: MyHammerConfig } ] // use our custom hammerjs config }) export class AppModule { } 在示例中,仅是想为 swipe 行为重写一些默认配置,如果想有更多的控制,可以像上面那样实现 HammerGestureConfig 类 查看一下 HammerGestureConfig 没那么复杂的源码或者文档,整个类仅有两个属性( events,overrides) 和一个方法( buildHammer ) 总结: Angular 与 HammerJS 集成以实现触摸手势事件检测非常容易.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |