支持 AJAX 的模板无限滚动

版本:

浏览量:1054

最后更新：2021-09-10

应用标签：Jquery插件 MAC 软件 git

推荐指数:

查看演示点击下载

详细信息

无限滚动WithTemplate.js 是一个轻量级且易于使用的 jQuery 插件，用于在您的 Web 应用程序中实现支持 AJAX 的无限滚动。

该插件使用 AJAX 请求获取数据并在页面滚动时在文档中加载更多内容，或者您单击自定义触发器元素，如加载更多按钮。

适用于桌面和移动设备。基于jsrender JavaScript 模板引擎。

也可以看看：

JavaScript 中的 10 个最佳无限滚动插件

如何使用它：

1. 在文档中加载所需的 jQuery 和 jsrender JavaScript 库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jsrender.min.js"></script>

2. 加载 Load InfiniteScrollWithTemplate 插件。

<script src="jquery.infiniteScrollWithTemplate.js"></script>

3. 创建用于数据渲染的自定义模板。

<script id="my-tmpl" type="text/x-jsrender">
  <p>{{:id}}. {{:title}}</p>
</script>

4. 创建一个容器，在页面滚动时将新内容附加到该容器中。

<div id="result"></div>

5. 初始化插件并确定数据源。

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
});

6. 数据应返回 AJAX 响应如下。

{
  "data": [
      {
        "id": 1,
        "title": "Title 1"
      },
      {
        "id": 2,
        "title": "Title 2"
      },
      {
        "id": 3,
        "title": "Title 3"
      },
      // more data here
  ]
}

7. 启用加载更多按钮以加载更多内容而不是页面滚动。

<button id="loadmore">Load More</button>

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
  loadSelector: $('#loadmore'),
});

8. 更多带有默认值的插件选项。

$("#result").infiniteTemplate({
 
  // POST, PUT, DELETE
  method: "GET",
 
  // Merge with json to load
  templateHelpers: null,
 
  // load on page load
  loadAtStart: true,
 
  // Load more data when the selector gets clicked
  loadSelector: null,
 
  // initial page
  initialPage: 1,
 
  // prevent cache
  preventCache: false,
 
});

9. Execute a callback function when there is no result.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
  zeroCallback: function () {
    alert("zero alert");
  },
});

联系我们