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

2024年5月4日 441次阅读 来源: TERRILLTANG

HammerJS 是一个为 web 运用增添触摸手势的异常受欢迎的库,文中,将看到 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',
            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));
    }
}

笔记:

  1. 我们处置惩罚左滑右滑事宜用一样的函数 swipe

  2. swipe 有两个参数

    • 第一个参数是当前被选中的头像的索引

    • 第二个参数是可选的,滑动行动,左或许右

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

  4. 援用 HammerJS 文档,HammerJS 处置惩罚5个滑动事宜,滑动,左滑,右滑,上滑,下滑,在我们的例子中,我们只用处置惩罚左滑和右滑

  5. 我们在 HTML 视图中挪用 SWIPE 行动

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>

笔记:

  1. 经由过程 *ngFor 指令轮回出每一个头像,声明一个当地变量 idx 持有当前画像的索引.

  2. 然后,最先处置惩罚 swipeleft,swiperight 事宜,挪用之前声明的 swipe 要领

  3. $event 是一个事宜对象,我们不须要知道全部 $event 对象的信息,只须要知道 $event.type 返回的字符串是 swipeleft 照样 swiperight

  4. 依据 avatar.visible 增添或许移除两个 CSS 类 [class.visible] 或许 [class.hidden]

组件款式

能够运用 semantic-ui 轻松完成款式美化,但对于我们来说是不必要的,跳过这个部份,下面是须要增添到组件中的自定义 CSS 类

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

.visible {
    display: block;
}

.hidden {
    display: none;
}

笔记:

  1. 须要一切的画像堆在别的的最上方,因而,运用 .swipe-box 使一切画像浮动

  2. .visible 和 .hidden 用来隐蔽和显现画像卡

引入 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

假如你想增添一些自定义设置,像速率和阀值什么的,要怎么做呢?

疾速申明

  1. threshold (阀值): 辨认 swipe 手势的最小间隔值,默许: 10

  2. velocity (速率): 辨认 swipe 手势的最小速率,单元是 px/ms 默许: 0.3

官方文档上有供应一些别的的自定义设置项

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 ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ { 
                    provide: HAMMER_GESTURE_CONFIG, 
                    useClass: MyHammerConfig 
                } ] // use our custom hammerjs config
})

export class AppModule { }

在示例中,仅是想为 swipe 行动重写一些默许设置,假如想有更多的掌握,能够像上面那样完成 HammerGestureConfig 类

检察一下 HammerGestureConfig 没那末庞杂的源码或许文档,全部类唯一两个属性( events,overrides) 和一个要领( buildHammer )

总结:

Angular 与 HammerJS 集成以完成触摸手势事宜检测异常轻易.

原文地点: https://scotch.io/tutorials/u…
HammerJS swipe 设置文档: https://hammerjs.github.io/re…
示例运转地点: https://plnkr.co/edit/LCsiXOt…

    原文作者：TERRILLTANG
    原文地址: https://segmentfault.com/a/1190000009891161
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞