On the browser of a touch screen device, when a finger touches the screen, an event is generated. Some attributes or sub-attributes in this event can be used to obtain relevant information.
event.touches => is a list of touch points, such as a three-finger screenshot. How do I know that it is three fingers?
event.touches[0] => is the element in the first touch
point⚠️ The touch point of touchend is in changedTouches
Touch object properties:
clientY: relative to the browser window
pageY: relative to the dom page, the difference between pageY and clientY is that when the page exceeds a screen, pageY is larger, because pageY is relative to dom.
screenY: Relative to the screen, the calculation takes the upper left corner as the origin.
…X is the same
Through these attributes, determine whether to slide left, slide up, slide right, and slide down
Sliding left and right is applied to the switching of the marquee.
Swipe up and down should be used to refresh and load more.
touch event
touchstart, we can generally record the point when this event occurs event.touches
touchmove the event triggered when the finger moves on the screen
touchend, the event triggered when leaving the screen, the touch point when leaving event.changedTouches
Based on the above three events, how to achieve a pull-down refresh effect?