你可以使用AJAX来实现滑动加载更多功能。以下是一个示例代码:

HTML部分:

<div id="article-list">
  <!-- 文章列表 -->
</div>
<div id="load-more" style="display: none;">
  加载中...
</div>
<div id="no-content" style="display: none;">
  暂无内容
</div>

JavaScript部分:

var page = 1; // 当前页数

function loadMore() {
  $('#load-more').show();

  // 发送AJAX请求获取更多文章数据
  $.ajax({
    url: 'load_more.php',
    type: 'POST',
    data: { page: page },
    dataType: 'html',
    success: function(data) {
      if (data.trim() == '') {
        // 数据为空,显示无内容提示
        $('#no-content').show();
      } else {
        // 将文章数据添加到列表中
        $('#article-list').append(data);
        page++; // 增加页数
      }
    },
    complete: function() {
      $('#load-more').hide();
    }
  });
}

// 监听滚动事件
$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
    loadMore();
  }
});

// 页面加载时首次加载文章数据
loadMore();

PHP部分(load_more.php):

<?php
$page = $_POST['page'];

// 根据页数查询文章数据
// 这里使用你自己的数据库查询方法
$articles = queryArticles($page);

// 输出文章数据
foreach ($articles as $article) {
  echo '<div class="article">' . $article['title'] . '</div>';
}
?>

请根据你自己的实际情况修改代码中的数据库查询方法和文章数据的输出方式

移动端html+php数据库调用文章数据滑动加载更多当数据没有时提示无内容加载

原文地址: https://www.cveoy.top/t/topic/h9k5 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录