JavaScript模拟手势翻页动作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33008701/article/details/55259615

js模拟h5页面在手机浏览器中的手势翻页动作
var startY, move,YcurPage=1;
document.getElementById("includeContent").addEventListener("touchstart", function (e) {
    startY = e.touches[0].pageY;//获取初始的纵坐标值
});

document.getElementById("includeContent").addEventListener("touchmove", function (e) {
    moveY = e.touches[0].pageY;//获取移动的纵坐标值
});

/*根据滑动的距离判断翻页方式*/
document.getElementById("includeContent").addEventListener("touchend", function (e) {
    var changeY = moveY - startY;
    if (changeY > 100) {//上翻页
        if (curPage > 1) {
            curPage = curPage - 1;
            changePage(curPage);//----------显示当前页面的方法
        } else {
            changePage(curPage);
        }
    }
    if (changeY < -100) {//下翻页
        if (curPage <5) {//最大页码为5
            curPage = curPage + 1;
            changePage(curPage);
        } else {
            changePage(curPage);
        }
    }

});