公司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
}
}

第一種方式並不適合TypeScript的表達方式,必須把document.addEventListener封裝在另一個函式中,並且在建構函式中呼叫,十分不方便,所以我選擇了第二種方式

解決以上問題後,來看看我的實現原理吧:

上下滑動實現原理如下:

1.監聽touchstart事件,當手指觸控式螢幕幕時候觸發，即使已經有一個手指放在螢幕上也會觸發

使用變數this.OrClientY將本次event所觸碰的clientY屬性記錄下來

換句話說把每次使用者剛開始滑動螢幕時的Y座標記錄下來

2.監聽touchend事件,當手指從螢幕上離開的時候觸發

每次比對捕獲到的touchend事件當前Y座標,如果這個Y大於this.OrClientY那麼就表示'上滑'

如果Y小於this.OrClientY則表示'下滑'.程式碼中this.allcon是控制angular2頁面ngIf指令的一個標記.

同理可以實現左右滑動的判定,甚至也可以實現任意方向,甚至可以控制滑動距離,這種解決方案相對不依賴框架和平臺,可以作為當前框架沒有支援時的一種備選.

缺點也很明顯,如果要實現較為複雜的手勢判定則需要編制較為複雜的程式碼,需要對平面幾何有一定的瞭解.

以前看書時會看到說JS基礎很重要,現在看來,任何一個框架都不可能面面俱到,總會面臨各種不符合需求的情況,此時就需要使用JS支援寫出彌合縫隙的程式碼,而不是說你只需要會框架就可以的.