React開發實踐如何做出好用的Switch元件

前言

手勢檢測

我們對move事件的要求非常簡單，就是每當手指在 dom 內移動時，就把手指劃過的相對距離告知***。

假設手指從 (x1,y1) 點滑到 (x2,y2) 點，那麼手指在兩點間滑動的x軸相對距離就是 x2 - x1 ，y軸相對距離 y2 - y1。所以，只要我們能夠獲取手指的座標位置，就能算出手指每次移動的相對距離，然後把δx和δy告知 move 事件的監聽函式。

所以，move事件的***一般是這樣(注意es6語法):

_onmove (event)  = event;
...}

無論多麼複雜的手勢系統，他們都會基於四個最基礎的觸控事件：

touchstart

touchmove

touchend

touchcancel

通過他們可以獲取手指觸控點的座標資訊，進而算出手指移動的相對距離。

根據上面的**，先來實現 touch 事件監聽函式:

_ontouchstart(e)

_ontouchstart 函式非常簡單，就是記錄下初始觸控點的座標，儲存在startx starty 變數中。

_ontouchmove(e) );
this.startx = point.pagex;
this.starty = point.pagey;
e.preventdefault();
}

_ontouchmove 函式邏輯也比較清楚，通過 touch 的觸控點 point 和 startx, starty 得到手指的相對位移 deltax, deltay, 然後發出 onmove 事件，告知***有 move 事件發生，並攜帶 deltax, deltay 資訊。最後，用現在的觸控點座標去更新 startx, starty。

_ontouchend(e) 
_ontouchcancel(e)

既然我們要用 react 實現元件，那就把 move 事件轉化成 react **：

render() );
}

一定注意我們用了 react.children.only 限制只有乙個子級，思考一下為什麼。完整的**請參考這裡，我們只給出大致結構：

export default
class
gestures
extends
component 
_emitevent(eventtype,e) {}
_ontouchstart(e) {}
_ontouchmove(e) {}
_ontouchcancel(e){}
_ontouchend(e){}
render(){}
}gestures.proptypes = ;

switch 元件實現

return (

ref="toggler" classname="toggler">div>

div>);}

translatex = deltax0 + deltax1 + ... + deltaxn

有了這個公式，就可以用 react 來實現了。首先修改render函式:

render()  = this.state;
let togglestyle = px,0px) translatez(0)`,
webkittransform: `translate($px,0px) translatez(0)` 
}return (
toggler" 
ref="togger" style=>);}

在 gestures 中，用 this.onmove 去監聽 move 事件。在 onmove 函式中，需要累加 deltax 作為 toggler 的位移。

然而還有兩個明顯的問題。

當手指抬起時，toggler 就立即停止移動了。而我們的需求是當手指抬起時，toggler 需要自動滑到開始或者結束的位置。

也就是說，還需要監聽手指在 toggler 上面的 touchstart 和 touchend 事件。當 touchstart 發生時，需要開啟 toggler 移動的開關，當 touchend 發生時，需要根據情況讓 toggler 滑到開始或結束的位置。

邏輯還是很清楚，下面來修改**吧：

首先為 toggler 加上 touch 監聽函式

render()  
ontouchcancel=
ontouchend=
ref="togger" style=>
...}

在 ontoggertouchstart 函式中，開啟滑動開關(movingenable) , 同時取消 toggler 位移動畫。

ontoggertouchstart(e)

在 ontoggertouchcancel 函式中，關閉滑動開關，同時為 toggler 新增乙個位移動畫。還根據 toggler 此時的位移量(translatex)，將 toggler 調整為回到初始位置(0) 或者回到最大位置(xboundary)。

完整**請參考 github

React開發實踐如何做出好用的Switch元件

如何做出更好的跳槽選擇

如何做出半透明和閃光效果

教你如何做出有創意的作品

React開發實踐 如何做出好用的Switch元件

如何做出更好的跳槽選擇

如何做出半透明和閃光效果

教你如何做出有創意的作品

相關推薦

React開發實踐如何做出好用的Switch元件