码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-09-27 00:19:21      阅读:545      评论:0      收藏:0      [点我收藏+]

标签:

方案一:使用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;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]);
        }
    }
});
技术分享

 

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

标签:

原文地址:http://www.cnblogs.com/libin-1/p/5911219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!