var StartX; Touch Start Horizontal
var starty; Touch Start ordinate
var Movespave; Distance to move
var Ismovex = true; Determine whether to move around
var IsFirst = true; Whether to judge the direction of Touchmove
var begintime=0;
Listening for touch events
Document.queryselector ("Body"). AddEventListener (' Touchstart ', function (event) {
StartX = Event.targettouches[0].pagex; Touch Start position assignment relative to the horizontal coordinate of the screen
Starty = Event.targettouches[0].pagey; Touch Start position assignment relative to the vertical coordinate of the screen
IsFirst = true;
Begintime=new Date (). GetTime ();
});
Listening for touch swipe events
Document.queryselector ("Body"). AddEventListener (' Touchmove ', function (e) {
var MoveX = E.targettouches[0].pagex; The position of the touch relative to the horizontal coordinate of the screen
var movey = E.targettouches[0].pagey; The position of the touch relative to the vertical coordinates of the screen
if (IsFirst) {
Math.Abs (MOVEX-STARTX)-Math.Abs (Movey-starty) >= 2? Ismovex = True:ismovex = false;
IsFirst = false;
Return
}
if (Ismovex) {
Horizontal Slide
Movespave = Movex-startx;
}
else {
Vertical Slide
Movespave = Movey-starty;
if (Movespave > 0) {
$ ('. Preloader '). addclass (' visible ');
} else {
$ ('. Addajax '). addclass (' visible ');
}
}
});
var page = 1; Number of pages of Ajax loading data
var totalnums = {$totalNums}; Total number of pages
var MaxPage = {$MaxPage}; Max pages
Listen for touch leave event
Document.queryselector ("Body"). AddEventListener (' Touchend ', function (e) {
var endtime = new Date (). GetTime ();
if ((Endtime-begintime) < 1000) {
Return
} else {
if (Ismovex) {//when it is a vertical operation
if (Movespave < 0) {}else if (Movespave > 0) {}
} else {
if (Movespave < 0) {//swipe up
$.ajax ({
URL: ",
DataType: ' JSON ',
Type: ' Get ',
Data: {"page":p age+1, ' totalnums ': totalnums},
Error:function (obj) {},
Success:function (data) {
if (data) {
}
}
});
} else if (Movespave > 0) {//swipe down to load data
Location.reload (TRUE); New Load Page
}
}
}
});
HTML5 Implementing Touch Loading Data