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

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

前言

HTML5 將 WEB 開發(fā)者的戰(zhàn)場(chǎng)從傳統(tǒng)的 PC 端帶到了移動(dòng)端.然而移動(dòng)端交互的核心在于手勢(shì)和滑動(dòng),如果只是將 PC 端的點(diǎn)擊體驗(yàn)簡(jiǎn)單地移植到移動(dòng)端,勢(shì)必讓移動(dòng)端體驗(yàn)變得了無生趣.以某 APP 收銀臺(tái)的支付密碼輸入框?yàn)槔?里面的 Switch 組件只能通過點(diǎn)擊改變狀態(tài),和原生控件的體驗(yàn)有著非常大的差距,不符合移動(dòng)端的交互習(xí)慣.接下來,我們來嘗試做出一個(gè)支持手指滑動(dòng)操作的 Switch 組件,提升用戶體驗(yàn).

手勢(shì)檢測(cè)

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

我們對(duì)move事件的要求非常簡(jiǎn)單,就是每當(dāng)手指在 DOM 內(nèi)移動(dòng)時(shí),就把手指劃過的相對(duì)距離告知監(jiān)聽器.

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

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

_onMove (event) {

  let {

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

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

  } = event;

  ...

}

無論多么復(fù)雜的手勢(shì)系統(tǒng),他們都會(huì)基于四個(gè)最基礎(chǔ)的觸摸事件:

touchstart

touchmove

touchend

touchcancel

通過他們可以獲取手指觸摸點(diǎn)的坐標(biāo)信息,進(jìn)而算出手指移動(dòng)的相對(duì)距離.

根據(jù)上面的圖解,先來實(shí)現(xiàn) touch 事件監(jiān)聽函數(shù):

_onTouchStart(e) {

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

  this.startX= point.pageX;

  this.startY = point.pageY;

}

_onTouchStart 函數(shù)非常簡(jiǎn)單,就是記錄下初始觸摸點(diǎn)的坐標(biāo),保存在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 函數(shù)邏輯也比較清楚,通過 touch 的觸摸點(diǎn) point 和 startX, startY 得到手指的相對(duì)位移 deltaX, deltaY, 然后發(fā)出 onMove 事件,告知監(jiān)聽器有 move 事件發(fā)生,并攜帶 deltaX, deltaY 信息.最后,用現(xiàn)在的觸摸點(diǎn)坐標(biāo)去更新 startX, startY.

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