HTML, CSS and jQuery: Make a pull-down refresh function-JS Tutorial-php.cn

HTML, CSS and jQuery: Make a pull-down refresh function

王林

Release： 2023-10-24 08:31:53

Original

1400 people have browsed it

HTML, CSS and jQuery: Make a pull-down refresh function

HTML, CSS and jQuery: Creating a pull-down refresh function

In modern web applications, pull-down refresh has become one of the features that many users are looking forward to. Through pull-down refresh, users can easily and quickly update the content of the current page, providing a better user experience. This article will introduce how to use HTML, CSS and jQuery to make a simple and powerful drop-down refresh function.

First, we need to create a basic HTML structure to display the page content and the effect of pull-down refresh. Here is an example HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>下拉刷新示例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container">
    <header>
      <h1>下拉刷新示例</h1>
    </header>
    <div id="content">
      <!-- 此处是页面内容 -->
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Copy after login

Next, we need to add some CSS styles for the drop-down refresh effect. We can use CSS to specify the animation effect during pull-down refresh and the style of the page content area. The following is an example CSS code:

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100vh;
}

header {
  background: #f1f1f1;
  padding: 20px;
}

#content {
  padding: 20px;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

#spinner {
  margin: 10px auto;
  display: block;
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

Copy after login

Now let’s implement the pull-down refresh function. We need to use the jQuery library to monitor the user's pull-down action and trigger the pull-down refresh event. The following is an example JavaScript code:

$(document).ready(function() {
  var content = $("#content");
  var spinner = $("#spinner");

  var isDragging = false;
  var startOffset, endOffset;
  var threshold = 100; // 触发下拉刷新的阈值

  content.on("touchstart mousedown", function(event) {
    isDragging = true;
    startOffset = getOffset(event);
  });

  content.on("touchmove mousemove", function(event) {
    if (!isDragging) return;

    endOffset = getOffset(event);

    // 检查是否达到了触发阈值
    if (endOffset - startOffset > threshold) {
      spinner.show();
      // 执行下拉刷新操作
      refreshContent();
    }
  });

  content.on("touchend mouseup", function(event) {
    isDragging = false;
    spinner.hide();
  });

  function getOffset(event) {
    return event.originalEvent.touches ? event.originalEvent.touches[0].pageY : event.pageY;
  }

  function refreshContent() {
    // 在这里执行具体的下拉刷新操作，例如从服务器获取最新数据
    // 注意：由于每个应用的具体实现方式不同，这里的代码可能需要根据实际情况进行调整
    setTimeout(function() {
      spinner.hide();
      // 刷新页面内容
      content.html("刷新后的内容");
    }, 1500);
  }
});

Copy after login

The above JavaScript code uses jQuery's event processing method to achieve the pull-down refresh effect by monitoring the user's touchstart, touchmove, touchend, mousedown, mousemove and mouseup events.

When the user starts dragging the page, we record the startOffset, which indicates the position where the user starts to pull down. Then, when the user moves the page, we determine whether the user has pulled down to the specified threshold based on the offset of the move. If the threshold is reached, we show a loading animation and execute the refreshContent() function.

In the refreshContent() function, you can add specific pull-down refresh operations. For example, get the latest data from the server. After you complete the refresh operation, you can update the page content and hide the loading animation.

Through HTML, CSS and jQuery, we can easily create a pull-down refresh function. You can extend and customize it according to your needs to create a pull-to-refresh effect that better suits your application needs. Hope this article can help you!

The above is the detailed content of HTML, CSS and jQuery: Make a pull-down refresh function. For more information, please follow other related articles on the PHP Chinese website!