<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #slideDown{margin-top: 0;width: 100%;} #slideDown1,#slideDown2{width: 100%;height: 70px;;background: #e9f4f7;display: none;} #slideDown1{height: 20px;} #slideDown1>p,#slideDown2>p{margin: 20px auto;text-align:center;font-size: 14px;color: #37bbf5;} </style> </head> <body ng-app="myApp"> <div> <div> <ul> <li>item1 -- item1 -- item1</li> <li>item2 -- item2 -- item2</li> <li>item3 -- item3 -- item3</li> <li>item4 -- item4 -- item4</li> <li>item5 -- item5 -- item5</li> <li>item6 -- item6 -- item6</li> <li>item7 -- item7 -- item7</li> <li>item11 -- item11 -- item1</li> <li>item21 -- item21 -- item2</li> <li>item31 -- item31 -- item3</li> <li>item41 -- item41 -- item4</li> <li>item51 -- item51 -- item5</li> <li>item61 -- item61 -- item6</li> <li>item71 -- item71 -- item7</li> <li>item12 -- item12 -- item1</li> <li>item22 -- item22 -- item2</li> <li>item32 -- item32 -- item3</li> <li>item42 -- item42 -- item4</li> <li>item52 -- item52 -- item5</li> <li>item62 -- item62 -- item6</li> <li>item72 -- item72 -- item7</li> <li>item13 -- item13 -- item1</li> <li>item23 -- item23 -- item2</li> <li>item33 -- item33 -- item3</li> <li>item43 -- item43 -- item4</li> <li>item53 -- item53 -- item5</li> <li>item63 -- item63 -- item6</li> <li>item73 -- item73 -- item7</li> <li>item14 -- item14 -- item1</li> <li>item24 -- item24 -- item2</li> <li>item34 -- item34 -- item3</li> <li>item44 -- item44 -- item4</li> <li>item54 -- item54 -- item5</li> <li>item64 -- item64 -- item6</li> <li>item74 -- item74 -- item7</li> <li>item15 -- item15 -- item1</li> <li>item25 -- item25 -- item2</li> <li>item35 -- item35 -- item3</li> <li>item45 -- item45 -- item4</li> <li>item55 -- item55 -- item5</li> <li>item65 -- item65 -- item6</li> <li>item75 -- item75 -- item7</li> <li>item16 -- item16 -- item1</li> <li>item26 -- item26 -- item2</li> <li>item36 -- item36 -- item3</li> <li>item46 -- item46 -- item4</li> <li>item56 -- item56 -- item5</li> <li>item66 -- item66 -- item6</li> <li>item76 -- item76 -- item7</li> <li>item17 -- item17 -- item1</li> <li>item27 -- item27 -- item2</li> <li>item37 -- item37 -- item3</li> <li>item47 -- item47 -- item4</li> <li>item57 -- item57 -- item5</li> <li>item67 -- item67 -- item6</li> <li>item77 -- item77 -- item7</li> <li>item18 -- item18 -- item1</li> <li>item28 -- item28 -- item2</li> <li>item38 -- item38 -- item3</li> <li>item48 -- item48 -- item4</li> <li>item58 -- item58 -- item5</li> <li>item68 -- item68 -- item6</li> <li>item78 -- item78 -- item7</li> <li>item19 -- item19 -- item1</li> <li>item29 -- item29 -- item2</li> <li>item39 -- item39 -- item3</li> <li>item49 -- item49 -- item4</li> <li>item59 -- item59 -- item5</li> <li>item69 -- item69 -- item6</li> <li>item79 -- item79 -- item7</li> <li>item10 -- item10 -- item1</li> <li>item20 -- item20 -- item2</li> <li>item30 -- item30 -- item3</li> <li>item40 -- item40 -- item4</li> <li>item50-- item50 -- item5</li> <li>item60 -- item60 -- item6</li> <li>item70 -- item70 -- item7</li> </ul> </div> <div reload-data></div> </div> <script src="../js/angular.js"></script> <script> var app = angular.module('myApp',[]); app.directive('reloadData',function(){ return{ restrict:'A', template : "<div id='slideDown'><div id='slideDown1'><p>松开刷新</p></div><div id='slideDown2'><p>正在刷新 ...</p><div/></div>", link:function(){ var flag; var _start; var disValue; var _end;var scrollTop;var dScope;var bodyHeight; window.addEventListener("scroll",function(){ scrollTop = document.body.scrollTop; bodyHeight = document.body.offsetHeight; var dElement = document.documentElement.clientHeight ; dScope= dElement + scrollTop; if(dScope >=bodyHeight){flag = true} if(flag){ k_touch("y"); }else{ return; } }); / function slideDownStep1(dist){ // dist 下滑的距离,用以拉长背景模拟拉伸效果 var slideDown1 = document.getElementById("slideDown1"), slideDown2 = document.getElementById("slideDown2"); slideDown2.style.display = "none";//正在刷新block slideDown1.style.display = "block";//松开刷新出现 slideDown1.style.height = (parseInt("20px") + dist) + "px";//松开刷新的高度 } function slideDownStep2(){ var slideDown1 = document.getElementById("slideDown1"), slideDown2 = document.getElementById("slideDown2"); slideDown1.style.display = "none";//松开刷新none slideDown1.style.height = "20px";//高度设定为20px slideDown2.style.display = "block";//刷新出现 //刷新数据 //location.reload();//加载数据 } function slideDownStep3(){ var slideDown1 = document.getElementById("slideDown1"), slideDown2 = document.getElementById("slideDown2"); slideDown1.style.display = "none";//松开刷新none slideDown2.style.display = "none";//正在刷新none } function k_touch(way){ // console.log(scrollTop); // console.log(flag); if(flag){ document.body.addEventListener("touchstart",touchStart,false);//当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 document.body.addEventListener("touchmove",touchMove,false);//当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 document.body.addEventListener("touchend",touchEnd,false); function touchStart(event){//touchStart函数 var touch = event.targetTouches[0]; if(way == "x"){ // _start = touch.pageX; }else{ _start = touch.pageY; } } // function touchMove(event){//touchMove函数 var touch = event.targetTouches[0]; if(way == "x"){ _end = (_start - touch.pageX); }else{ _end = (touch.pageY); disValue = _start - _end; //下滑才执行操作 if(dScope > bodyHeight){ if(disValue > 0){ if( flag){slideDownStep1(disValue)}else{ return; } }else{ return; } }else{ return; } } } / function touchEnd(event){//touchEnd函数 console.log(disValue); if(disValue < 0){ // console.log("左滑或上滑 "+_end); }else{ // console.log("右滑或下滑"+_end); console.log('flag:'+flag); if(dScope < bodyHeight){ flag = false } if(flag){ slideDownStep2(); //刷新成功则 //模拟刷新成功进入第三步 setTimeout(function(){ slideDownStep3(); },3500); // }else{ return; } } } }else{ return; } / } } /// } }) </script> </body> </html>
angluar的上拉刷新
最新推荐文章于 2021-04-30 10:11:35 发布