zoukankan      html  css  js  c++  java
  • 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); //从新 加载页面
                                  
                    }
                }
            }
        });   

  • 相关阅读:
    JqGrid常用示例
    jqGrid无刷新分页,添加行按钮
    C#两个实体之间相同属性的映射
    Log4Net日志记录
    C#压缩图片
    ASP.Net MVC4.0+无刷新分页
    世界各个国家中英文sql建表
    ASP.NET多语言
    分布式事务处理中的幂等性
    分布式事务前瞻-接口幂等性
  • 原文地址:https://www.cnblogs.com/phplhs/p/4439698.html
Copyright © 2011-2022 走看看