怎么用React做出好用的Switch組件

小編給大家分享一下怎么用React做出好用的Switch組件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

前言

HTML5 將 WEB 開發者的戰場從傳統的 PC 端帶到了移動端.然而移動端交互的核心在于手勢和滑動,如果只是將 PC 端的點擊體驗簡單地移植到移動端,勢必讓移動端體驗變得了無生趣.以某 APP 收銀臺的支付密碼輸入框為例,里面的 Switch 組件只能通過點擊改變狀態,和原生控件的體驗有著非常大的差距,不符合移動端的交互習慣.接下來,我們來嘗試做出一個支持手指滑動操作的 Switch 組件,提升用戶體驗.

手勢檢測

手勢交互的關鍵在于一套手勢事件監測系統,用于檢測move, tap, double tap, long tap, swipe, pinch, rotate等手勢行為.安卓和 IOS 都提供一套完善的手勢系統供原生 APP 調用,遺憾的是,HTML5 還沒有相應的 API,需要 HTML5 工程師自己實現.出于簡化,我們的 Switch 組件只支持 move 事件,因此,本章也只實現 move 事件的檢測.其他事件的檢測我們將在下一篇博文 <<HTML5 手勢檢測原理和實現>> 中詳細介紹.

我們對move事件的要求非常簡單,就是每當手指在 DOM 內移動時,就把手指劃過的相對距離告知監聽器.

假設手指從 (X1,Y1) 點滑到 (X2,Y2) 點,那么手指在兩點間滑動的X軸相對距離就是 X2 - X1 ,Y軸相對距離 Y2 - Y1.所以,只要我們能夠獲取手指的坐標位置,就能算出手指每次移動的相對距離,然后把&Delta;X和&Delta;Y告知 move 事件的監聽函數.

所以,move事件的監聽器一般是這樣(注意ES6語法):

_onMove (event) {

  let {

    deltaX,  //手指在X軸上的位移

    deltaY   //手指在Y軸上的位移

  } = event;

  ...

}

無論多么復雜的手勢系統,他們都會基于四個最基礎的觸摸事件:

touchstart

touchmove

touchend

touchcancel

通過他們可以獲取手指觸摸點的坐標信息,進而算出手指移動的相對距離.

根據上面的圖解,先來實現 touch 事件監聽函數:

_onTouchStart(e) {

  let point = e.touches ? e.touches[0] : e;

  this.startX= point.pageX;

  this.startY = point.pageY;

}

_onTouchStart 函數非常簡單,就是記錄下初始觸摸點的坐標,保存在startX startY 變量中.

_onTouchMove(e) {

  let point = e.touches ? e.touches[0] :e;

  let deltaX = point.pageX - this.startX;

  let deltaY = point.pageY - this.startY;

  this._emitEvent('onMove',{

    deltaX,

    deltaY

  });

  this.startX = point.pageX;

  this.startY = point.pageY;

  e.preventDefault();

}

_onTouchMove 函數邏輯也比較清楚,通過 touch 的觸摸點 point 和 startX, startY 得到手指的相對位移 deltaX, deltaY, 然后發出 onMove 事件,告知監聽器有 move 事件發生,并攜帶 deltaX, deltaY 信息.最后,用現在的觸摸點坐標去更新 startX, startY.

看完了這篇文章，相信你對“怎么用React做出好用的Switch組件”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！