SoFunction
Updated on 2025-04-07

JS plug-in drop-down refresh, pull-up loading summary

Front-end displays php code;

<?php 
header("Content-type: text/html; charset=utf-8");
include_once("./");
// Acquisition of initial display interface data$data = file_get_contents(URL."/interfaces/?paging=1");
// echo $data;die;
$data = json_decode($data);
// var_dump($data);die;
 ?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
  <title>Load the top、bottom</title>
  <!-- Page layout -->
  <link rel="stylesheet" type="text/css" href="./css/" rel="external nofollow" >
  <!-- Frame layout -->
  <link rel="stylesheet" href="./css/" rel="external nofollow" >
</head>
<body>
<div class="header">
  <h1>Just think I'm a news page</h1>
</div>
<div class="content">
  <div class="lists">
  <!-- listsouter Avoid multiple cycles of output -->
  <?php for ($i=0; $i < count($data->data) ; $i++) { ?>
    <a class="item" href="#" rel="external nofollow" >
      <img src="./img/" alt="">
      <h3>hehe</h3>
      <span class="date"><?php echo $data->data[$i]->id; ?></span>
    </a>
  <?php } ?>
  </div>
</div>
<div class="footer">
  &lt;a href="#1" rel="external nofollow" class="item">Test menu</a>  &lt;a href="#2" rel="external nofollow" class="item">Display only</a>  &lt;a href="#3" rel="external nofollow" class="item">No function</a>  &lt;a href="#4" rel="external nofollow" class="item">No need to click</a>&lt;/div&gt;
&lt;!-- jQuery1.7above or Zepto Choose one of two，Don't quote them at the same time --&gt;
&lt;script src="./js/"&gt;&lt;/script&gt;
&lt;script src="./js/"&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
  var paging = 1;//Page number  // dropload function interface settings  $('.content').dropload({
    scrollArea : window,
    // Pull down to refresh the module to display content    domUp : {
      domClass  : 'dropload-up',
      // The drop-down process displays content      domRefresh : '&lt;div class="dropload-refresh"&gt;↓The drop-down process displays content-Pull down to refresh-Custom content&lt;/div&gt;',
      // Pull down to a certain extent to display the prompt content      domUpdate : '&lt;div class="dropload-update"&gt;↑Release update-Custom content&lt;/div&gt;',
      // Display content after release      domLoad  : '&lt;div class="dropload-load"&gt;&lt;span class="loading"&gt;&lt;/span&gt;loading-Custom content...&lt;/div&gt;'
    },
    domDown : {
      domClass  : 'dropload-down',
      // Slide to the bottom to display content      domRefresh : '&lt;div class="dropload-refresh"&gt;↑Pull-up load more-Custom content&lt;/div&gt;',
      // Display content during content loading      domLoad  : '&lt;div class="dropload-load"&gt;&lt;span class="loading"&gt;&lt;/span&gt;loading-Custom content...&lt;/div&gt;',
      // No more content - show prompt      domNoData : '&lt;div class="dropload-noData"&gt;No data yet-Custom content&lt;/div&gt;'
    },
    // 1. Pull down to refresh the callback function    loadUpFn : function(me){
      $.ajax({
        type: 'GET',
        // Get the latest data every time        url: './interfaces/?paging=1',
        dataType: 'json',
        success: function(data){
          // Although the interface provides a json string, the json object is received          // alert(typeof(data));
          var result = '';
          // Circular splicing display content DOM          // Refresh how much data is obtained and how much is displayed. Use html() to reset lists DOM          for(var i = 0; i &lt; ; i++){
            result +=  '&lt;a class="item opacity" href="'+[i].link+'" rel="external nofollow" rel="external nofollow" &gt;'
                    +'&lt;img src="'+[i].pic+'" alt=""&gt;'
                    +'&lt;h3&gt;hehe&lt;/h3&gt;'
                    +'&lt;span class="date"&gt;'+[i].id+'&lt;/span&gt;'
                  +'&lt;/a&gt;';
          }
          // For testing, delay loading by 1 second          setTimeout(function(){
            // Insert loading using html() to reset the DOM            $('.lists').html(result);
            // Every time the data is loaded, it must be reset            ();
          },1000);
        },
        // Loading error        error: function(xhr, type){
          alert('Ajax error!');
          // Reset even if there is a load error          ();
        }
      });
    },
    // 2. Pull-up load more callback functions    loadDownFn : function(me){
      paging++; // Each request, add 1 to the page number      $.ajax({
        type: 'GET',
        url: './interfaces/?paging='+paging,
        dataType: 'json',
        success: function(data){
          // data = (data);
          var result = '';
          // Select the data to be displayed Spliced ​​DOM          for(var i = 0; i &lt; ; i++){
            result +=  '&lt;a class="item opacity" href="'+[i].link+'" rel="external nofollow" rel="external nofollow" &gt;'
                    +'&lt;img src="'+[i].pic+'" alt=""&gt;'
                    +'&lt;h3&gt;heheh&lt;/h3&gt;'
                    +'&lt;span class="date"&gt;'+[i].id+'&lt;/span&gt;'
                  +'&lt;/a&gt;';
            if(&lt;15){
              // There is no data down further              // Lock              ();
              // Show no data              ();
              break;
            }
          }
          // For testing, delay loading by 1 second          setTimeout(function(){
            // After loading, inserting into the original DOM            $('.lists').append(result);
            // Every time the data is loaded, it must be reset            ();
          },1000);
        },
        // Loading error        error: function(xhr, type){
          alert('Ajax error!');
          // Reset even if there is a load error          ();
        }
      });
    },
    threshold : 50 // What is the function???  });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Backend pagination interface

&lt;?php 
header("Content-type: text/html; charset=utf-8");
// Includes database configuration informationinclude_once('../');
// Receive data$paging = isset($_REQUEST['paging'])?$_REQUEST['paging']:'';
// $paging = 1;
$num = 15;// Show record count per page$start_page = $num*($paging-1);// Number of the first record on each page// Used to return data$return = array(); 
$data = array();
/* mysqli object-oriented programming method */
// 1. Create a database link$conn = new mysqli($servername,$username,$password,$database);
if ($conn-&gt;connect_error) {
  die("Connection failed: ".$conn-&gt;connect_error);
}
// echo "Link Success";// Set the character set (in case of errors, write every time)$conn-&gt;query("SET NAMES utf8");
// 2. Data operation$sql = "SELECT * FROM mission_news order by id desc limit $start_page , $num;";
// $sql = "SELECT * FROM mission_news order by id desc limit 0 , 15;";
// 3. Execute a statement$ret = $conn-&gt;query($sql);
// 4. Loop to get each recordif ($ret-&gt;num_rows &gt; 0) {
  while ($row = $ret-&gt;fetch_assoc()) { //Return each record in an array    // var_dump($row);
    // echo "id = ".$row['id']." mid = ".$row['mid']." context = ".$row['context']."&lt;br&gt;";
    $tmp = array();//Temporary array integration information    $tmp['id'] = $row['id'];
    $tmp['mid'] = $row['mid'];
    $tmp['context'] = $row['context'];
    $tmp['turn'] = $row['turn'];
    $tmp['created'] = $row['created'];
    // Temporary array stitched into the returned array    $data[] = $tmp; // Self-increase  }
  // Styling returns array  $return['result'] = 1;
  $return['data'] = $data;
}
// 5. Close the database$conn-&gt;close();
// 6. Return as json stringecho json_encode($return);
 ?&gt;

The above is the summary of the JS plug-in drop-down refresh and loading that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!