1.安装
npm install hammerjs --save && npm install @types/hammerjs --save-dev
2.创建MyHammerConfig.ts
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';import * as Hammer from 'hammerjs';// create a class that overrides hammer default configexport class MyHammerConfig extends HammerGestureConfig {overrides = <any>{'swipe': { direction: Hammer.DIRECTION_ALL } // override default settings}}
3.module导入，并在providers里加入以下代码
providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }]
4.在html中通过swipeEvent方法就可以监听到向上和向下的滑动了
html：!!!注意(swipe)不能写在<ion-content>标签中，可以另起一个<div>
<ion-content ><div (swipe)="swipeEvent($event)"></div></ion-content>
ts：
import 'hammerjs';
swipeEvent($event) {console.log($event.direction);if ($event.direction === Hammer.DIRECTION_LEFT) {alert('left');} else if ($event.direction === Hammer.DIRECTION_RIGHT) {alert('right');} else if ($event.direction === Hammer.DIRECTION_UP) {alert('up');} else if ($event.direction === Hammer.DIRECTION_DOWN) {alert('down');}
参考资料：/p/d9e70df5366a
如果觉得《【ionic】实现页面上下左右滑动》对你有帮助，请点赞、收藏，并留下你的观点哦！
