手机端轻应用模拟原生的下拉刷新效果（JavaScript）

Posted 2020-08-10

方案一：使用iscoll等有下拉功能的框架。

分析：因为项目的结构已经基本完成，再使用框架，会与原来的结构互相影响；

 

方案二：用javascript、Jquery写。

分析：可能没有直接使用框架的效果好，但可以尽量使效果贴近原生。

 

综合考虑，采用方案二。

/////////////////////////////////////////////////////////////////////////////////////////////////

参考博客：http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html

1、index.html

refreshFeedback：刷新状态提示语

loading：箭头和loading的gif图

tasks：刷新的内容

<div id="wrapper">

    <div id="list">
        <div id="refreshFeedback" style="width:100%;height:36px;position:absolute;z-index:9;background-color:orange;top:40px;"><p></p></div>
        <div>
            <div id="loading" style="width:92%;height:70px;position:absolute;z-index:0;top:-60px">
                 <p></p>
            </div>

            <div class="list-group" id="tasks">
                 <!-- 内容动态生成-->
            </div>
        </div>
    </div>

</div>

 

2、app.js

searchTasks（）：刷新tasks内容的函数

//返回角度
            function GetSlideAngle(dx, dy) {
                return Math.atan2(dy, dx) * 180 / Math.PI;
            }
//根据起点和终点返回方向 1：向上，2：向下，0：未滑动
            function GetSlideDirection(startX, startY, endX, endY) {
                var dy = startY - endY;
                var dx = endX - startX;
                var result = 0;

                //如果滑动距离太短
                if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    return result;
                }
                var angle = GetSlideAngle(dx, dy);
                if (angle >= 45 && angle < 135) {
                    result = 1;
                }
                else if (angle >= -135 && angle < -45) {
                    result = 2;
                }
                else {
                    return result;
                }
                return result;
            }
            var startX, startY;
            var judge =0;
            document.getElementById("list").addEventListener(‘touchstart‘, function (ev) {
                ev = ev || window.event;   //兼容IE
                startX = ev.touches[0].pageX;
                startY = ev.touches[0].pageY;

                //初始化动画时间
                $("#tasks").css("transition","0s");
                $("#loading").css("transition","0s");
                //初始化向下的箭头
                $("#loading p").css("transform","rotate(0deg)");
                $("#loading p").html(‘<span class="glyphicon glyphicon-arrow-down"></span>‘);


            }, false);

            document.getElementById("list").addEventListener(‘touchmove‘, function (ev) {
                judge = 0;
                ev = ev || window.event;   //兼容IE
                var shift=event.touches[0].pageY-startY; //手指在屏幕上划动的距离
                var realShift=shift/2;     //元素实际位移的距离
                if( $(‘#wrapper #list‘).scrollTop()>0){
                    judge = 1;             //说明滚动条不在顶部，不需要触发下拉刷新
                    return;
                }
                else{
                    if(shift>0){
                        //只有滚动条在顶部，且下划时，才阻止滚动的默认行为（不影响滚动条的正常行为）
                        event.preventDefault();
                        if(shift<260){            //移到一定位置就不移了
                            $("#loading").css("transform","translateY("+realShift+"px"+")");
                            $("#tasks").css("transform","translateY("+realShift+"px"+")");
                        }

                        if(shift>=90){            //移到一定位置箭头垂直翻转
                            $("#loading p").css("transform","rotate(-180deg)");
                        }
                        else{
                            $("#loading p").css("transform","rotate(0deg)");
                        }

                    }
                }
            }, false);
            //手指离开屏幕，元素回到原位
            document.getElementById("list").addEventListener(‘touchend‘, function (ev) {
                ev = ev || window.event;   //兼容IE
                var endX, endY;
                endX = ev.changedTouches[0].pageX;
                endY = ev.changedTouches[0].pageY;
                var direction = GetSlideDirection(startX, startY, endX, endY);
                switch (direction) {
                    case 0:
                        break;
                    case 1:   //向上
                        break;
                    case 2:   //向下
                        if(judge==1){
                            return;
                        }
                        else{
                            $("#loading").css("transition","0.2s");
                            $("#tasks").css("transition","0.2s");   //还原的时候稍微慢一些

                            $("#loading").css("transform","translateY("+0+"px"+")");
                            $("#tasks").css("transform","translateY("+0+"px"+")");


                            if ((endY-startY)>90){
                                //$("#tasks").empty();
                                $("#loading p").html(‘<img src="img/loading2.gif">‘);//loading的gif图片
                                $("#loading").css("transition-delay","0.8s");//延迟0.8秒，模拟“思考”的效果
                                $("#tasks").css("transition-delay","0.8s");
                                whichPage = dataGroupPage[whichMemory];
                                whichPage.pageNo = 1;
                                searchTasks(dataGroupPage[whichMemory], memory[whichMemory]).then(function(data) {
                                    if(data==1){
                                        $("#refreshFeedback p").html("刷新成功");
                                    }
                                    else{
                                        $("#refreshFeedback p").html("刷新失败");
                                    }
                                    $("#refreshFeedback").css("display","block").hide().delay(800).fadeIn().delay(1200).fadeOut();
                                });

                            }
                        }
                        break;
                    default:
                }
            }, false);

3、app.css

#loading p{
    width:100%;
    position:absolute;
    bottom:30px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    transition:0.2s;
    font-size: larger;
    color:grey;
}

#loading p img{
    width:20px;
    height:20px;
}
#refreshFeedback{
    display: none;
}
#refreshFeedback p{
    margin:auto;
    text-align: center;
    line-height: 36px;
    color:white;
}

4、另外，还有下滑翻页的部分

$(‘#wrapper #list‘).bind(‘scroll‘, function () {
     if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        //如果上一次刷新得到的数据数小于一次刷新默认得到的数据数，说明这次刷新之后数据已经加载完毕，再滑动不再向数据库请求数据。
         if(lastPageSize<dataGroupPage[whichMemory].pageSize){
                        return;
         }
         else{
             dataGroupPage[whichMemory].pageNo += 1;
             searchTasks(dataGroupPage[whichMemory], memory[whichMemory]);
        }
    }
});