h5触摸事件-判断上下滑动

Posted 2020-10-08

        // 判断上下滑动
        var startX = 0,
        startY = 0;
    function touchStart(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;
        }catch(e){
            console.log(e.message)
        }
    }

    function touchMove(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //判断滑动方向
            if (y - startY<0) {
                console.log(‘上滑了！‘);
                var mainView = myApp.addView(‘.view-main‘, {domCache: true});
                mainView.router.load({pageName: ‘friendCircle‘});
            }
        }catch(e){
            console.log(e.message);
        }
    }

    // function touchEnd(evt){
    //     try{
    //         var touch = evt.touches[0], //获取第一个触点
    //                 x = Number(touch.pageX), //页面触点X坐标
    //                 y = Number(touch.pageY); //页面触点Y坐标
    //         //判断滑动方向
    //         if (y - startY<0) {
    //             console.log(‘上滑了！‘);
    //         }
    //     }catch(e){
    //         console.log(e.message);
    //         console.log("end");
    //     }
    // }

    //绑定事件
    function bindEvent(){
        document.addEventListener(‘touchstart‘,touchStart,false);
        document.addEventListener(‘touchmove‘,touchMove,false);
        // document.addEventListener(‘touchend‘,touchEnd,false);
    }


    bindEvent();

参考：http://blog.csdn.net/bbsyi/article/details/52108599