Js simulated mobile phone page file pull-down refresh

Js simulated mobile phone page file pull-down refresh

The boss said that this function is required. Well, let's take a look at the relevant items.

Finally, a simple drop-down page refresh form is created, which is not too complicated.

View demo

The effects can only be viewed in the simulator, such as in chrome or in a mobile browser. However, some browsers have problems during the test. Currently, the mobile phone cheetah is okay)

Mainly:

Drop-down --> prompt release refresh --> release --> Start refresh --> restore after refresh successful

Html and css

 
 

  
  
Style type = "text/css">
  
  
# 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>
  
  
 
  
  
 
  
  
<Div id = "content">
  
  
<Div id = "slideDown">
  
  
<Div id = "slideDown1">
  
  
<P> release and refresh </p>
  
  
</Div>
  
  
<Div id = "slideDown2">
  
  
<P> refreshing... </p>
  
  
</Div>
  
  
</Div>
  
  
<Div class = "myContent">
  
  
<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>
  
  
</Ul>
  
  
</Div>
  
  
</Div>
 
 

Js section:

Mainly

Bind an event to a node. It can be the whole body.

K_touch () function is the main code. Currently, it mainly involves three events: touchstart touchmove touchend.

PageX is used to obtain touch point coordinates. If pageY is incompatible, skip this step.

It is refreshed only when it is a decline, so you can control the way slightly, that is, whether to obtain pageX or pageY through this control.

Slide, you can directly see the change of dist. In fact, you can regard it as px.

For more functions, let's talk about it later ..

 
 

  
  
<Script type = "text/javascript">
  
  
// Step 1: pull-down process
  
  
Function slideDownStep1 (dist) {// dist sliding distance, used to stretch the background to simulate the stretching Effect
  
  
Var slideDown1 = document. getElementById ("slideDown1 "),
  
  
SlideDown2 = document. getElementById ("slideDown2 ");
  
  
SlideDown2.style. display = "none ";
  
  
SlideDown1.style. display = "block ";
  
  
SlideDown1.style. height = (parseInt ("20px")-dist) + "px ";
  
  
}
  
  
// Step 2: drop down and release,
  
  
Function slideDownStep2 (){
  
  
Var slideDown1 = document. getElementById ("slideDown1 "),
  
  
SlideDown2 = document. getElementById ("slideDown2 ");
  
  
SlideDown1.style. display = "none ";
  
  
SlideDown1.style. height = "20px ";
  
  
SlideDown2.style. display = "block ";
  
  
// Refresh data
  
  
// Location. reload ();
  
  
}
  
  
// Step 3: refresh complete and return to the previous status
  
  
Function slideDownStep3 (){
  
  
Var slideDown1 = document. getElementById ("slideDown1 "),
  
  
SlideDown2 = document. getElementById ("slideDown2 ");
  
  
SlideDown1.style. display = "none ";
  
  
SlideDown2.style. display = "none ";
  
  
}
  
  
 
  
  
// Call the sliding refresh
  
  
K_touch ("content", "y ");
  
  
// ContentId indicates event binding, way => x indicates the operation in the horizontal direction, and y indicates the operation in the vertical direction.
  
  
Function k_touch (contentId, way ){
  
  
Var _ start = 0,
  
  
_ End = 0,
  
  
_ Content = document. getElementById (contentId );
  
  
_ Content. addEventListener ("touchstart", touchStart, false );
  
  
_ Content. addEventListener ("touchmove", touchMove, false );
  
  
_ Content. addEventListener ("touchend", touchEnd, false );
  
  
Function touchStart (event ){
  
  
// Var touch = event. touches [0]; // This method can also be obtained, but it is not recommended.
  
  
 
  
  
Var touch = event.tar getTouches [0];
  
  
If (way = "x "){
  
  
_ Start = touch. pageX;
  
  
} Else {
  
  
_ Start = touch. pageY;
  
  
}
  
  
}
  
  
Function touchMove (event ){
  
  
Var touch = event.tar getTouches [0];
  
  
If (way = "x "){
  
  
_ End = (_ start-touch. pageX );
  
  
} Else {
  
  
_ End = (_ start-touch. pageY );
  
  
// The operation is performed only when the image is downgraded.
  
  
If (_ end <0 ){
  
  
SlideDownStep1 (_ end );
  
  
}
  
  
}
  
  
 
  
  
}
  
  
Function touchEnd (event ){
  
  
If (_ end> 0 ){
  
  
Console. log ("sliding left or sliding up" + _ end );
  
  
} Else {
  
  
Console. log ("sliding right or sliding down" + _ end );
  
  
SlideDownStep2 ();
  
  
// If the refresh is successful
  
  
// Step 3 after successful simulated refresh
  
  
SetTimeout (function (){
  
  
SlideDownStep3 ();
  
  
},2500 );
  
  
}
  
  
}
  
  
}
  
  
</Script>
 
 

A little tail is a season!