摘要：是一個為應(yīng)用添加觸摸手勢的非常受歡迎的庫文中將看到結(jié)合一起使用是多么的簡單原文示例是針對版本經(jīng)過測試在目前最新的版本中此教程依然適用文章將以來統(tǒng)一代稱版本名詞滑動和類似但滑動更快速無粘滯左滑右滑上滑下滑頭像輪播簡介我們將構(gòu)建一個頭像輪播可以

HammerJS 是一個為 web 應(yīng)用添加觸摸手勢的非常受歡迎的庫,文中,將看到 Angular 結(jié)合 HammerJS 一起使用是多么的簡單

原文示例是針對 Angular 2 版本,經(jīng)過測試,在目前最新的 Angular 4.x 版本中此教程依然適用,文章將以 Angular 來統(tǒng)一代稱 Angular 2.x ,Angular 4.x 版本

名詞

swipe: 滑動; 和 pan 類似,但滑動更快速,無粘滯.

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

carousel of avatars: 頭像輪播

簡介

我們將構(gòu)建一個頭像輪播,可以左滑或者右滑來查看每個頭像,可以使用下面的地址測試一下(最好在手機(jī)上,但也可以通過 chrome 和 firefox 桌面瀏覽器來模擬手機(jī)測試)

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

應(yīng)用配置

讓我們看一下我們的目錄結(jié)構(gòu)是怎樣的,我們有一個 app 目錄文件夾,目錄下包含了我們的頭像切換和啟動應(yīng)用的 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",
            visible: false
        },
        {
            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));
    }
}

筆記:

我們處理左滑右滑事件用同樣的函數(shù) swipe

swipe 有兩個參數(shù)

第一個參數(shù)是當(dāng)前被選中的頭像的索引

第二個參數(shù)是可選的,滑動動作,左或者右

你看到我們聲明了一個常量 SWIPE_DIRCTION ,這個常量的值是左滑或者右滑

引用 HammerJS 文檔,HammerJS 處理5個滑動事件,滑動,左滑,右滑,上滑,下滑,在我們的例子中,我們只用處理左滑和右滑

我們在 HTML 視圖中調(diào)用 SWIPE 動作

HTML VIEW

    
Swipe Avatars with HammerJS
    
    

        

            
        
        

            {{avatar.name}}
        
    

筆記:

通過 *ngFor 指令循環(huán)出每個頭像,聲明一個本地變量 idx 持有當(dāng)前畫像的索引.

然后,開始處理 swipeleft,swiperight 事件,調(diào)用之前聲明的 swipe 方法

$event 是一個事件對象,我們不需要知道整個 $event 對象的信息,只需要知道 $event.type 返回的字符串是 swipeleft 還是 swiperight

根據(jù) avatar.visible 添加或者移除兩個 CSS 類 [class.visible] 或者 [class.hidden]

組件樣式

可以使用 semantic-ui 輕松實現(xiàn)樣式美化,但對于我們來講是不必要的,跳過這個部分,下面是需要添加到組件中的自定義 CSS 類

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

.visible {
    display: block;
}

.hidden {
    display: none;
}

筆記:

需要所有的畫像堆在其它的最上方,因此,使用 .swipe-box 使所有畫像浮動

.visible 和 .hidden 用來隱藏和顯示畫像卡

引入 HammerJS 腳本

現(xiàn)在已經(jīng)完成了組件,開始設(shè)置 HammerJS , 首先,需要把 HammerJS 腳本文件引入到主視圖文件 index.html 文件中

...
    
    
....

默認(rèn)情況下,桌面瀏覽器是不支持 touch 事件,HammerJS 有一個擴(kuò)展叫 touch-emulator.js,提供一個調(diào)試工具來模擬實現(xiàn) touch 支持,你可以像引入 hammer.js 那樣引入它

...
    
    
    
...

具體是如何模擬實現(xiàn),可以查看 hammer.js 的官方文檔

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

    npm install hammerjs --save

然后,在項目中引入JS 文件

如果沒有引入 HammerJS file ,會有一個錯誤信息拋出: "Hammer.js is not loaded,can not bind swipeleft event".

應(yīng)用程序模塊

默認(rèn)情況,如果沒有任何自定義配置,就可以直接使用 HammerJS ,Angular 支持 HammerJS 開箱即用,在應(yīng)用啟動時,不需要包含任何內(nèi)容,您的應(yīng)用程序模塊看起來像下面這樣

// 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

如果你想增加一些自定義設(shè)置,像速度和閥值什么的,要怎么做呢?

快速說明

threshold (閥值): 識別 swipe 手勢的最小距離值,默認(rèn): 10

velocity (速度): 識別 swipe 手勢的最小速度,單位是 px/ms 默認(rèn): 0.3

官方文檔上有提供一些其它的自定義配置項

Angular 已經(jīng)內(nèi)置提供了一個叫做 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 = {
      "swipe": {velocity: 0.4, threshold: 20} // override default settings
  }
}

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ { 
                    provide: HAMMER_GESTURE_CONFIG, 
                    useClass: MyHammerConfig 
                } ] // use our custom hammerjs config
})

export class AppModule { }

在示例中,僅是想為 swipe 行為重寫一些默認(rèn)配置,如果想有更多的控制,可以像上面那樣實現(xiàn) HammerGestureConfig 類

查看一下 HammerGestureConfig 沒那么復(fù)雜的源碼或者文檔,整個類僅有兩個屬性( events,overrides) 和一個方法( buildHammer )

總結(jié):

Angular 與 HammerJS 集成以實現(xiàn)觸摸手勢事件檢測非常容易.

原文地址: https://scotch.io/tutorials/u...
HammerJS swipe 配置文檔: https://hammerjs.github.io/re...
示例運行地址: https://plnkr.co/edit/LCsiXOt...