入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

移动端页面下拉刷新,

创建时间:2016-08-27 投稿人: 浏览次数:1907
//content为滑动的对象,way为滑动的方向
function update(content,way){
    var _start = 0, 
        _end = 0, 
        _content = $(content)[0]; 
    _content.addEventListener("touchstart",touchStart,false); 
    _content.addEventListener("touchmove",touchMove,false); 
    _content.addEventListener("touchend",touchEnd,false); 
    $("<div class="update">松开刷新</div>").prependTo($(content));
    $(".update").css({"fontSize":"14px","text-align":"center","padding":"10px"});
    $(".update").hide();
    function touchStart(event){  
        //var touch = event.touches[0]; //这种获取也可以,但已不推荐使用 
        var touch = event.targetTouches[0]; 
        if(way == "x"){  
            _start = touch.pageX; 
        }else{  
            _start = touch.pageY; 
        } 
    } 
    function touchMove(event){  
        var touch = event.targetTouches[0]; 
        if(way == "x"){  
            _end = (_start - touch.pageX); 
        }else{  
            _end = (_start - touch.pageY); 
            //下滑才执行操作 
            if(_end < 0&&$(document).scrollTop()==0){ 
               // slideDownStep1(_end); 
               if(_end<-200){
               	 $(".update").height((30+200)+"px")
               }
               $(".update").height((30-_end)+"px")
               $(".update").show();               

            } 
        } 

    } 
    function touchEnd(event){  
        if(parseInt(_end) >0){  
            //console.log("左滑或上滑  "+_end); 
        }else if(parseInt(_end)<0&&$(document).scrollTop()==0){  
           // console.log("右滑或下滑"+_end); 
           // console.log(_end);
            $(".update").text("正在刷新");
            $(".update").height("30px")
            location.reload(); 
        	
            //slideDownStep2(); 
            //刷新成功则 
            //模拟刷新成功进入第三步 
            setTimeout(function(){  
               // slideDownStep3(); 
                 $(".update").remove();
            },2500); 
        }
    } 
}

声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
  • 上一篇:没有了
  • 下一篇:没有了
未上传头像