Mobile phone-side light application simulated native drop-down refresh effect (JavaScript)

Scenario One: Use Iscoll and other frameworks that have a pull-down function.

Analysis: Because the structure of the project has been basically completed, and then the use of the framework, and the original structure will affect each other;

Scenario Two: Write with JavaScript and jquery.

Analysis: It may not be possible to use the frame directly, but try to keep the effect close to the native.

Combined, the adoption of programme two.

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

Reference Blog: http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html

1, index.html

Refreshfeedback: Refresh status prompt

Loading: GIF of arrows and loading

Tasks: Refreshing content

<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 >                 <!--content is dynamically generated--            </div>        </div>    </div></div >

2, App.js

Searchtasks (): function to refresh tasks content

Returns the angle function getslideangle (dx, dy) {return math.atan2 (dy, dx) * 180/MATH.PI;  }//return direction according to start and end 1: Up, 2: down, 0: not sliding function getslidedirection (StartX, Starty, EndX, EndY) {var dy =                Starty-endy;                var dx = Endx-startx;                var result = 0;                If the sliding distance is too short if (Math.Abs (dx) < 2 && math.abs (DY) < 2) {return result;                } var angle = getslideangle (dx, dy);                if (angle >= && 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;                Compatible with IE StartX = Ev.touches[0].pagex;                Starty = Ev.touches[0].pagey;                Initialize the animation time $ ("#tasks"). CSS ("transition", "0s");                $ ("#loading"). CSS ("transition", "0s");                Initialize the downward arrow $ ("#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; Compatible with IE var shift=event.touches[0].pagey-starty;     The distance the finger moves on the screen var realshift=shift/2;             The distance of the actual displacement of the element if ($ (' #wrapper #list '). scrolltop () >0) {judge = 1;                Note that the scroll bar is not at the top, do not need to trigger the drop refresh return; } else{If(shift>0)                        {//Only the scroll bar is at the top, and when it is down, the default behavior for scrolling is blocked (does not affect the normal behavior of the scroll bar) Event.preventdefault (); if (shift<260) {//moves to a certain position without moving the $ ("#loading"). CSS ("transform", "Translat                            EY ("+realshift+" px "+") ");                        $ ("#tasks"). CSS ("transform", "Translatey (" +realshift+ "px" + ")"); } if (shift>=90) {//move to a certain position the arrow flips vertically $ ("#loading p"). CSS ("Trans                        Form "," Rotate ( -180deg) ");                        } else{$ ("#loading p"). CSS ("transform", "Rotate (0deg)");            }}}}, False); The finger leaves the screen and the element returns to its original position document.getElementById ("list"). AddEventListener (' Touchend ', function (EV) {EV = EV | |   window.event;                Compatible with 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://upward break;                        Case 2://Down if (judge==1) {return;                            } else{$ ("#loading"). CSS ("transition", "0.2s");   $ ("#tasks"). CSS ("transition", "0.2s");                            Restore the time slightly slower $ ("#loading"). CSS ("transform", "Translatey (" +0+ "px" + ")");                            $ ("#tasks"). CSS ("transform", "Translatey (" +0+ "px" + ")");                                if ((Endy-starty) >90) {//$ ("#tasks"). empty ();                            $ ("#loading p"). html ('  ");//loading gif pictures    $ ("#loading"). CSS ("Transition-delay", "0.8s");//delay 0.8 seconds, simulate "think" effect $ ("#tasks"). CSS ("Transi                                Tion-delay "," 0.8s ");                                Whichpage = Datagrouppage[whichmemory];                                Whichpage.pageno = 1; Searchtasks (Datagrouppage[whichmemory], memory[whichmemory]). Then (function (data) {if (d                                    Ata==1) {$ ("#refreshFeedback p"). html ("refresh succeeded");                                    } else{$ ("#refreshFeedback p"). html ("Refresh failed"); } $ ("#refreshFeedback"). CSS ("Display", "block"). Hide ()                                . Delay (+). FadeIn (). Delay (.). 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, in addition, there is a slide to the part of the page

$ (' #wrapper #list '). Bind (' scroll ', function () {     if ($). ScrollTop () + $ (this). Innerheight () >= $ (this) [0]. ScrollHeight) {        //If the number of data last refreshed is less than the number of data received by default at one time, the data has been loaded after this refresh, and then sliding no longer requests data to the database.         if (lastpagesize<datagrouppage[whichmemory].pagesize) {                        return;         }         else{             Datagrouppage[whichmemory].pageno + = 1;             Searchtasks (Datagrouppage[whichmemory], memory[whichmemory]);}}    );

Mobile phone-side light application simulated native drop-down refresh effect (JavaScript)