The Android mobile terminal touch realizes the pull-down refresh function

Part I: four touch events

1. Touchstart: as long as you put your fingers on the screen (no matter how many), the touchstart event will be triggered.

2. Touchmove: this event will be triggered continuously when we slide our fingers on the screen. If we don't want the page to slide, we can use event's preventdefault to prevent this default behavior.

3. Touchend: when the finger slides away from the screen, the touchend event is triggered.

4. Touchcancel: triggered when the system stops tracking touch. For example, in the process of touching, a prompt box appears on the page alert (), which will trigger this event. This event is rarely used.

Part II: four touch objects

1. Touches, a class array object, contains all the finger information. If there is only one finger, we use touches [0].

　 2. targetTouches 。 Finger information of the finger in the target area.

3. Changedtouches: the finger information that triggered this event last time.

4. During touchend, the touches and targettouches information will be deleted. The last information saved by changedtouches is best used to calculate the finger information.

Part III: Example 1

Look at the renderings first:

Its implementation principle is very simple, that is, set the position attribute of the red circle to absolute, and then, when we slide it, the touchmove event is triggered. Set its left and top to pagex and pagey of the event. To ensure that the trigger center and the center of the circle are in the same position, just add half of the width to pagex and half of the height to pagey.

The source code is as follows:

Part IV: Example 2

This example is the implementation of the pull-down refresh function. The effect is as follows:

The source code is as follows:

The above is what Xiaobian introduced to you. The mobile terminal touch realizes the pull-down refresh function. I hope it will help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!