About Mobile swipe gestures

Background:

Based on the mobile side of the project to be tried, there is a need to have a pull down gesture to load different data, which involves sliding gestures and Ajax data loading knowledge points. Therefore, the whole realization process to do a record collation. Personal JS Limited, read a lot of examples and the mobile gesture knowledge point combing the technical blog to achieve the realization of the function. And in the process, it was only a preliminary understanding of the mobile framework Zepto.js. _ (: З"∠) _ Of course, at the end of the choice is to use the original to achieve this function, only because this is able to understand the overall function of the principle of understanding more fully, and want to rely less on plug-ins. However, on the data load, because of the cost of time and so on, and finally the use of jquery to achieve the part of Ajax.

Description: To load the previous or next week data information for the current week page by swiping down or up by one finger, data refresh on the previous or next week.

Implementation: 1. Gets the coordinates (x, y) when the finger touches the screen;

2. Under the premise of limiting one-finger touch, obtain the coordinate position of the finger in the screen after moving (X1,Y2);

3. Use if to control the vertical and horizontal numerical differences between coordinates (x, y) and end coordinates (X1,Y2), limiting the sliding range;

4. Eligible to load the corresponding specified data.

RELATED links:

Native JS implements touch-slip event http://dobit.top/Detail/109.html

Play turn H5 pull down slide effect https://isux.tencent.com/h5-drop-down-effect-slide.html

Open source Mobile element drag inertia bounce and pull load two JS http://www.zhangxinxu.com/wordpress/2017/01/mobile-phone-drag-drop-inertia-loading/

The basic is to simplify the native JS implementation of touch-slip event code to achieve sliding motion. And the control of the if aspect needs to be improved on its own. And the other two examples have a place for me to inspire. And the two examples of the relevant explanations are also very detailed, is worth recording.

About Mobile swipe gestures