Simple Implementation of Javascript Drop down Refresh

  • 2021-07-21 06:54:40
  • OfStack

This article example shares the simple implementation code of Javascript drop-down refresh for everyone's reference, the specific contents are as follows

Html related code


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
 <body style="background-color: beige;">
  <div id="container" style="width:100%;border:solid 1px blue; transform:translate(0px,-61px)">
   <div style="height:50px; line-height:50px; text-align:center; width:100%; border:solid 1px red;">
     Trying to load ...
   </div> 
   <div style="width:100%; line-height:30px;background-color:#F2F2F2; font-size:17px; font-family:'Adobe Garamond Pro'">
     Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh 
     Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh 
     Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh Pull-down Refresh 
   </div>
  </div>
 </body>
</html>
<!--JQuery It is so easy to use, how can it be without it in this case! -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

What should JavaScript do?

1. Dynamically adjust the slider position according to the sliding track (transfrom= > translate);

2. Judge whether to refresh (or load data) according to the sliding distance.

Of course, if you use ajax to reload the page data after sliding, it will also involve the effect of sliding 1 page up and hiding the prompt part.

General idea:

(Prerequisite: The current element has slid to the top)

1. When the left mouse button is pressed (touchstart event on mobile device), record the Y axis coordinates of the current mouse position;

2. When the mouse moves (touchmove event), record the Y axis coordinates of the mouse to judge the sliding track and move the corresponding slider;

3. When the left mouse button is released (touchend event), it is judged whether the page should be refreshed (or reloaded) by comparing the distance between Y axis coordinates at the beginning and end of the mouse.

On the code:


/*
 *obj-- Sliding object 
 *offset-- Sliding distance (when sliding distance is greater than or equal to offset Will be called when callback ) 
 *callback-- Callback function after sliding is completed 
 */
 var slide = function (obj, offset, callback) {
  var start,
   end,
   isLock = false,// Whether to lock the entire operation 
   isCanDo = false,// Whether to move the slider 
   isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
   hasTouch = 'ontouchstart' in window && !isTouchPad;
  // Converts an object to a jquery Object of 
  obj = $(obj);
  var objparent = obj.parent();
  /* Operation method */
  var fn =
   {
    // Moving container 
    translate: function (diff) {
     obj.css({
      "-webkit-transform": "translate(0," + diff + "px)",
      "transform": "translate(0," + diff + "px)"
     });
    },
    // Set the effect time 
    setTranslition: function (time) {
     obj.css({
      "-webkit-transition": "all " + time + "s",
      "transition": "all " + time + "s"
     });
    },
    // Return to the original position 
    back: function () {
     fn.translate(0 - offset);
     // Identify the completion of the operation 
     isLock = false;
    }
   };
  // Slide start 
  obj.bind("touchstart", function (e) {
   if (objparent.scrollTop() <= 0 && !isLock) {
    var even = typeof event == "undefined" ? e : event;
    // Identify that the operation is in progress 
    isLock = true;
    isCanDo = true;
    // Save the current mouse Y Coordinates 
    start = hasTouch ? even.touches[0].pageY : even.pageY;
    // Eliminate slider animation time 
    fn.setTranslition(0);
   }
  });
  // Sliding 
  obj.bind("touchmove", function (e) {
   if (objparent.scrollTop() <= 0 && isCanDo) {
    var even = typeof event == "undefined" ? e : event;
    // Save the current mouse Y Coordinates 
    end = hasTouch ? even.touches[0].pageY : even.pageY;
    if (start < end) {
     even.preventDefault();
     // Eliminate slider animation time 
     fn.setTranslition(0);
     // Move the slider 
     fn.translate(end - start - offset);
    }
   }
  });
  // Sliding end 
  obj.bind("touchend", function (e) {
   if (isCanDo) {
    isCanDo = false;
    // Judging whether the sliding distance is greater than or equal to a specified value 
    if (end - start >= offset) {
     // Set the rebound time of the slider 
     fn.setTranslition(1);
     // Keep the prompt section 
     fn.translate(0);
     // Execute callback function 
     if (typeof callback == "function") {
      callback.call(fn, e);
     }
    } else {
     // Return to the initial state 
     fn.back();
    }
   }
  });
 }

Code analysis:

1. Parameter: obj, the object to slide; offset, the value of transform in the prompt section (transform: translate (0px,-61px) in the code, then this is 61); callback, callback function, the function called after the drop-down is complete (page refresh or data load).

2. Why is transform not margin?

Because transform does not cause redrawing, it is smoother and has better performance than margin. But there is something interesting about transfrom. If the value of translateY is negative (the current element moves up xx pixels), the elements below it will not move up (margin moves up), which is different from margin in this respect. Note that the existence of-webkit-transform here is necessary, because some browsers can't recognize transform, such as WeChat built-in browsing (this is the case on my mobile phone). For compatibility, it is worthwhile to deduct a few more letters.

3. Set transition to 0s.

Why set the value of transition to 0 seconds when touchstart? The function of transition is to add transition effect for the change of element attributes. For example, if a box becomes larger, we set transition to 1s, then this box becomes larger to the specified size within 1s. The first parameter indicates the name of the CSS property that sets the transition effect (e.g. margin, transform; all for all), and the second parameter indicates the transition time. The purpose of setting transition in the code is to add a transition effect to the slider rebound after sliding (finger off the screen), so that it will not look so abrupt. Of course, this transition effect will also apply to the hiding of the prompt part after the data is loaded. It is set to 0 to cancel the slider transition effect during sliding. When our fingers slide down, the slider will move down with this, thus having the effect of sliding the slider. If you don't cancel the transition at this time, the slider will shake (hey hey, if you are interested, you can try this feeling.) . transition is very important in the whole process.

4. About isLock and isCanDo.

The purpose of these two variables is to prevent two slides, and the second slide is not allowed after the first slide and before the data loading is completed. When sliding begins, isLock and isCanDo are set to True, which means that the codes in the latter two events can run normally. When sliding ends, isCanDo is set to false, which means that all event codes are unavailable before isLock is set to True (before the whole operation is completed) (no drop-down data loading and other related actions are performed).

5. How to use it?


$(function () {
 slide("#container", 61, function (e) {
  var that = this;
  setTimeout(function () {
   that.back.call();
  }, 2000);
 });
});

Related articles: