Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use React to make good Switch components, I hope you will learn something after reading this article, let's discuss it together!

Preface

HTML5 brings the battlefield of WEB developers from the traditional PC to the mobile. However, the core of mobile interaction is gesture and sliding. If we simply transplant the click experience of PC to mobile, it will certainly make the mobile experience boring. Take the payment password input box of an APP cashier as an example, the Switch component in it can only change the state by clicking, which is very different from the experience of the native control and does not conform to the interaction habit of the mobile terminal. Next, let's try to make a Switch component that supports finger sliding to improve the user experience.

Gesture detection

The key of gesture interaction is a set of gesture event monitoring system, which is used to detect gesture behaviors such as move, tap, double tap, long tap, swipe, pinch, rotate and so on. Both Android and IOS provide a complete gesture system for native APP calls. Unfortunately, HTML5 does not have a corresponding API, which needs to be implemented by HTML5 engineers. For simplicity, our Switch component only supports move events, so this chapter only implements move event detection. The detection of other events will be described in detail in the next blog post.

Our requirement for the move event is very simple, which is to tell the listener the relative distance of the finger every time the finger moves in the DOM.

Suppose the finger slips from the (X1 ~ Y1) point to the (X2 ~ Y2) point, then the relative distance of the X-axis between the two points is the relative distance of the X-axis Y2-Y1. Therefore, as long as we can obtain the coordinate position of the finger, we can calculate the relative distance of each movement of the finger, and then tell the listening function of the move event Δ X and Δ Y.

So, listeners for move events generally look like this (note the ES6 syntax):

_ onMove (event) {

Let {

DeltaX, / / finger displacement on the X axis

DeltaY / / finger displacement on the Y axis

} = event

...

}

No matter how complex the gesture system is, they are based on four most basic touch events:

Touchstart

Touchmove

Touchend

Touchcancel

Through them, the coordinate information of the finger touch point can be obtained, and then the relative distance of the finger movement can be calculated.

According to the above illustration, let's first implement the touch event listening function:

_ onTouchStart (e) {

Let point = e.touches? E.touches [0]: e

This.startX= point.pageX

This.startY = point.pageY

}

The _ onTouchStart function is very simple, recording the coordinates of the initial touch point and saving it in the startX startY variable.

_ 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 ()

}

The logic of the _ onTouchMove function is also relatively clear. Through the touch points point and startX of touch, startY obtains the relative displacement of the finger deltaX, deltaY, and then sends out an onMove event to inform the listener that a move event has occurred, and carries deltaX and deltaY information. Finally, use the current touch point coordinates to update startX, startY.

After reading this article, I believe you have a certain understanding of "how to use React to make good Switch components". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.