HTML5 实现触摸加载数据

标签：

           
var startX;                     //触摸起始横坐标
var startY;                    //触摸起始纵坐标
var moveSpave;                //移动的距离
var isMoveX = true;          //判断是否为左右移动
var isFirst = true;          //是否要判断touchmove方向
var beginTime=0;

            //监听 触摸事件    
document.querySelector("body").addEventListener(‘touchstart‘,  function(event){
    startX   = event.targetTouches[0].pageX; //触摸起始位置赋值 相对于屏幕的 横向坐标
    startY   = event.targetTouches[0].pageY; //触摸起始位置赋值 相对于屏幕的 纵向坐标
    isFirst  = true;
    beginTime=new Date().getTime();
    
    });            
//监听 触摸滑动事件    
document.querySelector("body").addEventListener(‘touchmove‘, function(e){
 var moveX = e.targetTouches[0].pageX; //触摸的位置   相对于屏幕的 横向坐标
 var moveY = e.targetTouches[0].pageY; //触摸的位置   相对于屏幕的 纵向坐标
                    if (isFirst) {
                        Math.abs(moveX - startX) - Math.abs(moveY - startY) >= 2 ? isMoveX = true : isMoveX = false;
                        isFirst = false;
                        //return;
                    }

                    if (isMoveX) {
                        //水平滑动
                        moveSpave = moveX - startX;
                    }
                    else {
                        
                        //竖直滑动
                        moveSpave = moveY - startY;
                        
                        if(moveSpave > 0) {
                            $(‘.preloader‘).addClass(‘visible‘);
                        } else {
                           
                            $(‘.addajax‘).addClass(‘visible‘);
                        }
                    }
    });
var page      = 1; //ajax 加载数据的页数
var totalNums = {$totalNums}; //总共的页数
var MaxPage   = {$MaxPage}; //最大页数

    //监听触摸离开事件
document.querySelector("body").addEventListener(‘touchend‘, function(e){
        var endtime = new Date().getTime();
        if((endtime - beginTime) < 1000) {
              
              return;
        } else {
            if (isMoveX) { //当是垂直操作的时候
                if (moveSpave < 0) {}else if (moveSpave > 0) { }
            } else {
                 if (moveSpave < 0) {  //向上滑动
                
                     $.ajax({
                            url     : ‘‘,
                            dataType: ‘json‘,
                            type    : ‘get‘,
                            data    :  {"page":page+1,‘totalNums‘:totalNums},
                            error   : function(obj) {},
                            success : function(data) {
                              if(data) {
                                
                                
                                }
                            }
                        });
                     
                    
                } else if (moveSpave > 0) { //向下滑动  加载数据
                         
                          
                        location.reload(true); //从新 加载页面
                              
                }
            }
        }
    });   

HTML5 实现触摸加载数据

标签：

原文地址：http://www.cnblogs.com/phplhs/p/4439698.html