Angular2 移动端手势识别与实现1

最新推荐文章于 2024-09-19 15:51:51 发布

置顶 magicYANG-1989

最新推荐文章于 2024-09-19 15:51:51 发布

阅读量2.1k

点赞数 1

分类专栏： Angular2躺坑之旅文章标签： Angular2 ionic APP 手势识别事件监听

本文链接：https://blog.csdn.net/weixin_40564006/article/details/80519335

版权

Angular2躺坑之旅专栏收录该内容

3 篇文章 0 订阅

订阅专栏

公司APP项目基于Angular2+Ionic 最近需要实现一个支持向上\向下滑动显示不同内容的页面,实际实现时发现有如下的坑:

1.移动端有自己的默认上滑\下滑事件,并不识别Ionic自带的识别指令,只能识别on-swipe指令且只支持左右滑动

on-swipe-up 和 on-swipe-down 指令完全无法使用

2.如果自己实现必须要捕获触摸事件,TypeScript中事件捕获要么使用传统的addEventListener

//事件监听
 public eventListener(){
   document.addEventListener('click', function(e: MouseEvent) {
     alert(213)
   });
 }

要么使用Angular2核心模块的@HostListener机制捕获事件

@HostListener('touchstart')
dealwith1(){
  this.OrClientY = event['targetTouches'][0].clientY
}
@HostListener('touchend')
dealwith2(){
  if(event['changedTouches'][0].clientY>this.OrClientY){
    this.allcon = false
  }else if(event['changedTouches'][0].clientY<this.OrClientY){
    this.allcon = true
  }
}