使用hammer为angular2添加手势支持（1）环境搭建

最新推荐文章于 2021-11-23 08:12:14 发布
最新推荐文章于 2021-11-23 08:12:14 发布
阅读量1.4k 收藏
点赞数 2
分类专栏： JavaScript 文章标签： angular ng2 hammer.js angular2 手势
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueyang11/article/details/52882521
版权
本文介绍了如何在Angular2项目中利用hammer.js进行手势开发。首先，通过angular-cli搭建开发环境，修改angular-cli.json以支持less。接着，创建hammer组件，并将相关配置进行调整。最后，展示如何在组件中应用手势识别。
摘要由CSDN通过智能技术生成

hammer.js对angular非常友好，无论是angular1还是angular2都可以很好的使用hammer.js进行移动端手势开发。

工具及技术选型

  • 开发框架：angular 2
  • 构建工具：angular-cli
  • 样式：less
  • 手势库：hammer.js

开始开发

首先安装angular-cli

npm install -g angular-cli

构建开发环境

新建文件夹 ng2-hammer-bigpicture
命令行进入ng2-hammer-bigpicture文件夹下，输入ng init，等待安装结束

修改angular-cli.json

我们要用less来写样式，修改默认的样式文件。在项目根目录中将angular-cli.json 中的

"styles": [
    "styles.css"
],

改为

最低0.47元/天 解锁文章
yueyang11
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Angular + Typescript + Hammerjs实现触摸手势 简单测试
你为什么不努力的专栏
08-17 2330
Angular + Typescript + Hammerjs实现触摸 很基础很简单的测试，不对CSS，TS及其Angular结构不做深入的修饰和优化 参考链接： 在 Angular 中使用 HammerJS (触摸手势)：https://segmentfault.com/a/1190000009891161 实现结果 准备工作 你需要安装hammerjs包：npm ins...
hammer移动端手势插件
04-18
使用该插件在移动端实现长按、单击、双击效果，不用自己再封装实现该效果。
[译] 在 Angular 中使用 HammerJS (触摸手势)
weixin_33929309的博客
06-22 546
HammerJS 是一个为 web 应用添加触摸手势的非常受欢迎的库,文中,将看到 Angular 结合 HammerJS 一起使用是多么的简单 原文示例是针对 Angular 2 版本,经过测试,在目前最新的 Angular 4.x 版本中此教程依然适用,文章将以 Angular 来统一代称 Angular 2.x ,Angular 4...
angular内置手势库hammer.js
weixin_34146986的博客
06-08 951
<div class="hammer" (tap)="onSwiper($event)">tap</div> <div class="hammer" (pinch)="onSwiper($event)">pan</div> <div class="hammer" (panstart)
【转】ionic之AngularJS手势事件
weixin_34072159的博客
07-30 98
ionic开发app时，常会用到很多的手势，下面是推荐一篇有关手势的介绍。原文链接：http://www.ionic.ren/2015/12/... 1、长按 : on-hold 在屏幕同一位置按住超过500ms，将触发on-hold事件： 你可以在任何元素上使用这个指令挂接监听函数： <any on-hold=“…”>…&l...
Angular2 移动端手势识别与实现1
weixin_40564006的博客
05-31 2159
公司APP项目基于Angular2+Ionic 最近需要实现一个支持向上\向下滑动显示不同内容的页面,实际实现时发现有如下的坑:1.移动端有自己的默认上滑\下滑事件,并不识别Ionic自带的识别指令,只能识别on-swipe指令且只支持左右滑动  on-swipe-up 和 on-swipe-down 指令完全无法使用2.如果自己实现必须要捕获触摸事件,TypeScript中事件捕获要么使用传统的...
angular-gestures：AngularJS指令，可为您的应用添加对多点触摸手势的支持。 基于Hammer.js
02-19
角手势AngularJS指令，基于Hammer.js向您的应用程序添加了对多点触摸手势的支持。用法在页面中包含gestures.js或gestures.min.js 将'angular-gestures' angular.module('myApp', ['angular-gestures']);声明为您的...
hammer.js实现图片手势放大效果
10-19
主要为大家详细介绍了hammer.js实现图片手势放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html移动开发手势缩放（纯干货）（基于hammer velocity）
06-21
Hammer.js是一个轻量级的手势库，它提供了丰富的手势识别功能，如滑动、双击、捏合等，使得开发者可以轻松地在Web应用中添加多点触控手势。Velocity.js则是一个高性能的动画引擎，它不仅可以处理CSS属性的动画，还能...
hammer-cli-foreman-ssh:为 Hammer Foreman CLI 添加远程 SSH 支持
06-12
Hammer CLI - Foreman SSH 锤子的SSH插件安装$ git clone git@github.com:theforeman/hammer-cli-foreman-ssh.git$ cd hammer-cli-foreman-ssh$ rake install$ cd .. 在锤子配置目录中注册插件 cat > ~/.hammer/cli....
ionic-long-press:关于离子组件上的长按事件的小指令
05-02
离子长按 假设您需要在按下按钮的同时快速增加某些内容。 或者其他的东西。 该指令旨在通过为您提供间隔发射，在Ionic用于长按的现有Hammer.JS press事件的基础上。 兼容性 此插件应与Ionic和Angular 7+兼容。 它已通过Ionic 4.11.5和Angular 8.2.14进行了测试。 安装 npm install --save ionic-long-press 在您的Ionic项目中包括HammerJs 步骤1 npm install --save hammerjs @types/hammerjs 第2步 // in src/main.ts. import 'hammerjs' 第三步 在您的utils文件夹中创建一个IonicGestureConfig.ts文件，并包括以下内容： import { Injectable } from '@angular/co
Hammer.js移动端手势库实例
09-26
里面包括很多事例，可以实现div,img的缩放，旋转，滑动 还有在指定区域内滑动不能覆盖其他区域，还有很多其他实例自己挖掘，http://www.cnblogs.com/vajoy/p/4011723.html一份官方翻译说明，附有操作说明书。
vue2-hammer Vue 2.x的Hammer.js包装器，支持移动触摸。-Vue.js开发
05-27
vue-hammer Vue的Hammer.js包装器支持移动设备中的某些操作这是Hammer.js 2.x的指令包装器。 Vue-hammer的Hammer.js包装器为Vue提供了支持，以支持移动设备中的某些操作。这是Hammer.js 2.x的指令包装器。 而这种...
DOTA2 Workshop Hammer全实体列表(Ver0.21)1
08-03
在DOTA2的游戏地图编辑工具Workshop Hammer中，有各种各样的实体用于构建和定制游戏环境及机制。这些实体在Ver0.21版本中包含了丰富的功能，涵盖了从音效控制到模型展示，再到游戏事件的触发等多个方面。以下是部分...
移动端JQ插件hammer使用详解
09-03
2. **获取元素并初始化Hammer实例**：和jQuery类似，选择需要监听手势的元素，然后在元素后附加`.hammer()`，例如：`var hammertime = $('.tabs a').hammer();` 3. **添加事件监听器**：通过`on`方法直接添加手势...
Angular2 移动端手势识别与实现2
weixin_40564006的博客
05-31 681
      上篇博客提到了在Angular2+Ioinc环境APP中实现手势识别,过了一会儿我想到可以使用Angular2指令的方式将这个识别功能指令化,简单复用到所有页面.       Angular2指令Directive是一种靠依赖注入的方式提供一系列封装功能.这种依赖注入在使用层面是DOM级的,例如 &lt;div *slide="'up'"&gt;       可以利用它执行两种功能: ...
hammerjs
神zhi殇的博客
12-18 733
参考：https://www.cnblogs.com/zhuzhenwei918/p/6853258.html
ionic5+angular指令使用hammerjs，实现长按复制
baidu_37332423的博客
11-23 2075
import { Directive, ElementRef } from '@angular/core'; import { Clipboard } from '@ionic-native/clipboard/ngx'; import { ToastController } from '@ionic/angular'; import Hammer from 'hammerjs'; @Directive({ selector: '[appPressCopy]' }) export class P.
ionic 3 中使用 hammer.js
weixin_43099985的博客
05-22 649
1. 在package.json 加入 "hammer-timejs": "^1.1.0", "hammer-touchemulator": "0.0.2", "hammerjs": "^2.0.8" 2. 在devDependencies中加入 "@types/hammerjs": "^2.0.34" 3.在app.module.ts中加入 import { ...
vue2使用hammer.js实现移动端div拖拽放大缩小旋转
最新发布
09-08
在Vue2中使用Hammer.js实现移动端div的拖拽、放大缩小和旋转可以按照以下步骤进行。 首先，在Vue项目中安装Hammer.js。 ``` npm install hammerjs ``` 然后，在需要使用拖拽、放大缩小和旋转功能的组件中引入...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值