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

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

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

名詞

swipe: 滑動(dòng); 和 pan 類似,但滑動(dòng)更快速,無粘滯.

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

carousel of avatars: 頭像輪播

簡(jiǎn)介

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

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

應(yīng)用配置

讓我們看一下我們的目錄結(jié)構(gòu)是怎樣的,我們有一個(gè) app 目錄文件夾,目錄下包含了我們的頭像切換和啟動(dòng)應(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 組件開始,在這個(gè)組件里,我們將定義頭像列表和處理頭像顯示和隱藏的 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 有兩個(gè)參數(shù)

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

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

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

引用 HammerJS 文檔,HammerJS 處理5個(gè)滑動(dòng)事件,滑動(dòng),左滑,右滑,上滑,下滑,在我們的例子中,我們只用處理左滑和右滑

我們?cè)?HTML 視圖中調(diào)用 SWIPE 動(dòng)作

HTML VIEW

    
Swipe Avatars with HammerJS
    
    

        

            
        
        

            {{avatar.name}}
        
    

筆記:

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

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

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

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

組件樣式

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

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

.visible {
    display: block;
}

.hidden {
    display: none;
}

筆記:

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

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

引入 HammerJS 腳本

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

...
    
    
....

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

...
    
    
    
...

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

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

    npm install hammerjs --save

然后,在項(xiàng)目中引入JS 文件

如果沒有引入 HammerJS file ,會(huì)有一個(gè)錯(cuò)誤信息拋出: "Hammer.js is not loaded,can not bind swipeleft event".

應(yīng)用程序模塊

默認(rèn)情況,如果沒有任何自定義配置,就可以直接使用 HammerJS ,Angular 支持 HammerJS 開箱即用,在應(yīng)用啟動(dòng)時(shí),不需要包含任何內(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 (閥值): 識(shí)別 swipe 手勢(shì)的最小距離值,默認(rèn): 10

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

官方文檔上有提供一些其它的自定義配置項(xiàng)

Angular 已經(jīng)內(nèi)置提供了一個(gè)叫做 HAMMER_GESTURE_CONFIG 的令牌,接受 HammerGestureConfig 類型的對(duì)象

簡(jiǎn)單的方式,可以繼承 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)配置,如果想有更多的控制,可以像上面那樣實(shí)現(xiàn) HammerGestureConfig 類

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

總結(jié):

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

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