js模拟手机滑动页面

引言：最近刚学习了触摸（touch）事件，做了一个模拟手机页面滑动的效果。

主要思路：

在手指放到手机上（触摸开始）时获取触点的坐标。

       

    function touchStart() {
        var touch = event.touches[0];
        //触摸开始 时 触摸位置坐标值
        startX = touch.pageX;
        startY = touch.pageY;

    }

在手指开始移动时（触摸移动）获取移动时的坐标，

并寻找下一页（遍历所有页面集合，找到当前操作的页面对象，根据className的独特性，找到显示级别最高的）

判断滑动方向—根据滑动方向确定仅次于最高级别页面显示的二级页面
        向上滑—寻找最后一页，将下一个操作的对象设为第一页
        向下滑—寻找第一页，将下一个操作对象设为第一页

        function touchMove() {

            var touch = event.touches[0];
            //触摸移动时当前坐标
            

function touchMove() {

        //        topY-=speed;
        //获取触摸焦点对象
        var touch = event.touches[0];
        //触摸移动时 当前坐标
        moveX = touch.pageX;
        moveY = touch.pageY;

        topY = moveY - startY;

        //循环遍历所有的page页面
        for(var i = 0; i < pageItem.length; i++) {
            //找到当前要做操作的对象
            if(pageItem[i].className == 'page zThisInd') {
                if(flag) {
                    //处理滑动方向
                    if(topY > 0) {
                    
                        pageItem[pageItem.length - 1 - this_index].className = 'page zNextInd';
                    } else {
                        //向上滑动
                       
                        if(i == pageItem.length - 1) {
                            pageItem[0].className = 'page zNextInd';
                            this_index = -1;
                        } else {
                            pageItem[i + 1].className = 'page zNextInd';
                            this_index = i;
                        }
                        //                        pageItem[i].className = 'page';
                    }
                    flag = false;
                }
                pageItem[i].style.top = topY + 'px';
                this_obj = pageItem[i];
            }
        }

    }

手指离开时（触摸结束）

添加计时器，由计时器负责跑完剩下的动画

恢复当前操作对象的className，恢复页面的位置—top，修改下一页
        清除定时器

function touchEnd() {

        if(moveY == 0) {
            console.log('点击事件');
        } else {
            timer = setInterval(function() {
                if(topY >= winHeight || topY <= -winHeight) {
                    clearInterval(timer);
                    this_obj.className = 'page'; //修改显示级别最高的对象为普通
                    this_obj.style.top = '0px';
                    pageItem[this_index + 1].className = 'page zThisInd'; //把 此次操作，第二级别的页面 改为第一级别，作为 下次操作的 最高级别的对象
                    flag = true;
                    return;
                }
                if(topY > 0) {
                    topY += speed;
                } else {
                    topY -= speed;
                }
                this_obj.style.top = topY + 'px';
                console.log('1');
            }, timer_speed);

        }
    }

具体代码如下：