[译] 在 Angular 中使用 HammerJS (触摸手势)

大佬教程收集整理的这篇文章主要介绍了[译] 在 Angular 中使用 HammerJS (触摸手势)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_607_0@原文示例是针对 Angular 2 版本,经过测试,在目前最新的 Angular 4.x 版本中此教程依然适用,文章将以 Angular 来统一代称 Angular 2.x,Angular 4.x 版本

@H_607_0@名词

@H_607_0@swipe: 滑动; 和 pan 类似,但滑动更快速,无粘滞.

@H_607_0@swipeleft,swiperight,swipeup,swipedown: 左滑,右滑,上滑,下滑

@H_607_0@carousel of avatars: 头像轮播

@H_607_0@简介

@H_607_0@我们将构建一个头像轮播,可以左滑或者右滑来查看每个头像,可以使用下面的地址测试一下(最好在手机上,但也可以通过 chrome 和 firefox 桌面浏览器来模拟手机测试)

@H_607_0@https://plnkr.co/edit/LCsiXOt...

@H_607_0@应用配置

@H_607_0@让我们看一下我们的目录结构是怎样的,我们有一个 app 目录文件夹,目录下包含了我们的头像切换和启动应用的 main.ts 文件

|- app/
    |- app.component.html
    |- app.component.css
    |- app.component.ts
    |- app.module.ts
    |- main.ts
|- index.html
|- tsconfig.json

@H_607_0@APP 组件

@H_607_0@让我们从 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));
    }
}

@H_607_0@笔记:

1. @H_607_0@我们处理左滑右滑事件用同样的函数 swipe

2. @H_607_0@swipe 有两个参数
   • @H_607_0@第一个参数是当前被选中的头像的索引

   • @H_607_0@第二个参数是可选的,滑动动作,左或者右

3. @H_607_0@你看到我们声明了一个常量 SWIPE_DIRCTION,这个常量的值是左滑或者右滑

4. @H_607_0@引用 HAMMerJS 文档,HAMMerJS 处理5个滑动事件,滑动,左滑,下滑,在我们的例子中,我们只用处理左滑和右滑

5. @H_607_0@我们在 HTML 视图中调用 SWIPE 动作

@H_607_0@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>

@H_607_0@笔记:

1. @H_607_0@通过 *ngFor 指令循环出每个头像,声明一个本地变量 idx 持有当前画像的索引.

2. @H_607_0@然后,开始处理 swipeleft,swiperight 事件,调用之前声明的 swipe 方法

3. @H_607_0@$event 是一个事件对象,我们不需要知道整个 $event 对象的信息,只需要知道 $event.type 返回的字符串是 swipeleft 还是 swiperight

4. @H_607_0@根据 avatar.visible 添加或者移除两个 CSS 类 [class.visible] 或者 [class.hidden]

@H_607_0@组件样式

@H_607_0@可以使用 semantic-ui 轻松实现样式美化,但对于我们来讲是不必要的,跳过这个部分,下面是需要添加到组件中的自定义 CSS 类

.swipe-Box {
    display: block;
    width: 100%;
    float: left;
    margin: 0;
}

.visible {
    display: block;
}

.hidden {
    display: none;
}

@H_607_0@笔记:

1. @H_607_0@需要所有的画像堆在其它的最上方,因此,使用 .swipe-Box 使所有画像浮动

2. @H_607_0@.visible 和 .hidden 用来隐藏和显示画像卡

@H_607_0@引入 HAMMerJS 脚本

@H_607_0@现在已经完成了组件,开始设置 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>

@H_607_0@默认情况下,桌面浏览器是不支持 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>

@H_607_0@具体是如何模拟实现,可以查看 hAMMer.js 的官方文档

@H_607_0@由于示例运行在 plunker,示例中引用了 HAMMerJS CDN URI,如果想本地管理,可以运行下面的命令.

npm install hAMMerjs --save

@H_607_0@然后,在项目中引入JS 文件

@H_607_0@如果没有引入 HAMMerJS file,会有一个错误信息抛出: 'HAMMer.js is not loaded,can not bind swipeleft event'.

@H_607_0@应用程序模块

@H_607_0@默认情况,如果没有任何自定义配置,就可以直接使用 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 { }

@H_607_0@定制 HAMMerJS

@H_607_0@如果你想增加一些自定义设置,像速度和阀值什么的,要怎么做呢?

@H_607_0@快速说明

1. @H_607_0@threshold (阀值): 识别 swipe 手势的最小距离值,默认: 10

2. @H_607_0@veLocity (速度): 识别 swipe 手势的最小速度,单位是 px/ms 默认: 0.3

@H_607_0@官方文档上有提供一些其它的自定义配置项

@H_607_0@Angular 已经内置提供了一个叫做 HAMMER_GEstuRE_CONfig 的令牌,接受 HAMMerGestureConfig 类型的对象

@H_607_0@简单的方式,可以继承 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 { }

@H_607_0@在示例中,仅是想为 swipe 行为重写一些默认配置,如果想有更多的控制,可以像上面那样实现 HAMMerGestureConfig 类

@H_607_0@查看一下 HAMMerGestureConfig 没那么复杂的源码或者文档,整个类仅有两个属性( events,overrides) 和一个方法( buildHAMMer )

@H_607_0@总结:

@H_607_0@Angular 与 HAMMerJS 集成以实现触摸手势事件检测非常容易.

大佬总结

以上是大佬教程为你收集整理的[译] 在 Angular 中使用 HammerJS (触摸手势)全部内容，希望文章能够帮你解决[译] 在 Angular 中使用 HammerJS (触摸手势)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。