小编给大家分享一下怎么用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 事件的检测.其他事件的检测我们将在下一篇博文 <
我们对move事件的要求非常简单,就是每当手指在 DOM 内移动时,就把手指划过的相对距离告知监听器.
假设手指从 (X1,Y1) 点滑到 (X2,Y2) 点,那么手指在两点间滑动的X轴相对距离就是 X2 - X1 ,Y轴相对距离 Y2 - Y1.所以,只要我们能够获取手指的坐标位置,就能算出手指每次移动的相对距离,然后把ΔX和Δ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组件”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
