eyoucms文档瀑布流鼠标下拉刷新加载教程

官方提供了瀑布流加载的接口，但只能点击加载。

这里提供页面下拉刷新加载的方法：

先按照官方提供的瀑布流标签完整的加入到模板，确保能实现点击可以加载。这一步是关键，以下的方法只是替代人工点击，实现下拉页面刷新。

<ｓｃｒｉｐｔ>
$(function() {
  let page = 2; // 初始页码
  let isLoading = false; // 加载锁：防止重复请求
  let hasMoreData = true; // 是否还有更多数据
  // 监听滚动事件
  $(window).scroll(function() {
    // 条件：1.还有数据 2.不在加载中 3.滚动到接近底部100px
    if (hasMoreData && !isLoading && ($(document).height() - $(window).height() - $(window).scrollTop()) < 100) {
      loadMoreData(); // 加载更多数据
    }
  });
  // 封装加载数据的函数，便于复用和维护
  function loadMoreData() {
    // 加锁：标记为正在加载
    isLoading = true;
    $.ajax({
      async: true, // 改为异步（必须！）
      url: "/index.php?m=api&c=Ajax&a=arcpagelist&lang=cn&pagesize=10&tagid=ycnhwl&tagidmd5=ycnhwl_e35dad44951a6ec4f9272aeb9564e64f",
      data: { page: page },
      type: "POST",
      dataType: "json",
      beforeSend: function() {
        // 可选：添加加载中提示（比如在ycnh容器底部显示“加载中...”）
        $("#ycnhwl").append('<div>加载中...</div>');
      },
      success: function(data) {
        // 移除加载中提示
        $(".loading-tip").remove();

        // 1. 判断是否有数据返回
        if (data && data.data && data.data.msg) {
          $("#ycnhwl").append(data.data.msg);
          page += 1; // 页码自增
        } else {
          // 无数据时标记为没有更多
          hasMoreData = false;
          $("#ycnhwl").append('<div>已加载全部内容</div>');
        }
      },
      error: function(xhr, status, error) {
        // 详细打印错误信息，便于调试
        console.error("加载失败：", status, error);
        $("#ycnhwl").append('<div>加载失败，请刷新重试</div>');
      },
      complete: function() {
        // 无论成功/失败，都解锁
        isLoading = false;
      }
    });
  }
});
</ｓｃｒｉｐｔ>

值得注意的是页面必须引入JQ。

另外js里面的md5值需要更改成你自己的，可以F12查看

演示地址：www.145758.com