angluar的下拉刷新

最新推荐文章于 2021-04-30 10:11:35 发布
黑骑军
最新推荐文章于 2021-04-30 10:11:35 发布
阅读量631
点赞数
分类专栏： angularjs
angularjs 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!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 reload-data></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>


<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($scope){
                window.addEventListener("scroll",function(){
                    $scope.scrollTop = document.body.scrollTop;
                    if($scope.scrollTop<=0){ console.log('刷新启动');k_touch("y");}else{console.log('未激活刷新');
                        console.log($scope.scrollTop);
                    }
                });
/
                function slideDownStep1(dist){ // dist 下滑的距离，用以拉长背景模拟拉伸效果
                    $scope.slideDown1 = document.getElementById("slideDown1");
                    $scope.slideDown2 = document.getElementById("slideDown2");
                    $scope.slideDown2.style.display = "none";//正在刷新block
                    $scope. slideDown1.style.display = "block";//松开刷新出现
                    $scope.slideDown1.style.height = (parseInt("20px") - dist) + "px";//松开刷新的高度
                }
                function slideDownStep2(){
                    $scope.slideDown1 = document.getElementById("slideDown1");
                    $scope.slideDown2 = document.getElementById("slideDown2");
                    $scope.slideDown1.style.display = "none";//松开刷新none
                    $scope.slideDown1.style.height = "20px";//高度设定为20px
                    $scope.slideDown2.style.display = "block";//刷新出现
                    //刷新数据
                    //location.reload();//加载数据
                }
                function slideDownStep3(){
                    $scope.slideDown1 = document.getElementById("slideDown1");
                    $scope.slideDown2 = document.getElementById("slideDown2");
                    $scope.slideDown1.style.display = "none";//松开刷新none
                    $scope.slideDown2.style.display = "none";//正在刷新none
                }
                
                function k_touch(way){
                    $scope._start = 0;
                     $scope. _end = 0;
                    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"){
                            $scope._start = touch.pageX;console.log('x'+$scope._start);
                        }else{
                            $scope._start = touch.pageY;console.log('ystart'+$scope._start);
                        }
                    }
                    //
                    function touchMove(event){//touchMove函数
                        var touch = event.targetTouches[0];
                        if(way == "x"){
                            $scope._end = ($scope._start - touch.pageX);
                        }else{
                            $scope._end = ($scope._start - touch.pageY);
                            //下滑才执行操作
                            if($scope._end < 0){
                                if( document.body.scrollTop <= 0){slideDownStep1($scope._end);}else{return;}
                            }
                        }
                    }
                    /
                    function touchEnd(event){//touchEnd函数
                        if($scope._end >0){
                            console.log("左滑或上滑 "+$scope._end);
                        }else{
                            console.log("右滑或下滑"+$scope._end);
                            
                            if( document.body.scrollTop <= 0){
                                
                                slideDownStep2();
                                //刷新成功则
                                //模拟刷新成功进入第三步
                                setTimeout(function(){
                                    slideDownStep3();
                                },3000);
                                //
                            }else{return;}

                        }

                    }
                    /
                }
            }
            ///
        }

    })
</script>
</body>
</html>
黑骑军
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angluar的下拉刷新

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: #
复制链接

扫一扫