手機端輕應用類比原生的下拉重新整理效果（JavaScript）

標籤：

方案一：使用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]);        }    }});

 

手機端輕應用類比原生的下拉重新整理效果（JavaScript）