无限滚动 MDB Pro component

无限滚动-Bootstrap 5和Material Design 2.0

此功能将滚动事件侦听器(添加到窗口或附加到该窗口的组件 它的overflow-y属性设置为滚动),并在每次用户使用时调用回调方法 到达页面/容器的末尾。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

向下滚动下面的容器可添加更多项目。

注意:您的元素应该是可滚动的,例如,它应具有 overflow-y:滚动属性,如下面的示例所示。

  • Angry
  • Dizzy
  • Flushed
  • Frown
  • Grimace
  • Grin

方向

使用 data-mdb-infinite-direction 定义滚动方向。

Angry Dizzy Flushed Grimace Grin

微调器和异步数据


窗口

您可以将 imdb.Infinite Scroll 实例应用于窗口。

注意:,您必须使用JavaScript自行初始化实例。如果 您正在使用其他容器,则必须检查 event.target 是否为 窗口

View full screen demo

无限滚动 - API


用法

通过数据属性


      <div class="infinite-scroll" data-mdb-infinite-direction="..." data-mdb-infinite-container="...">
        Sample content
      </div>
    

通过JavaScript


      const infiniteScrollInstance = new mdb.InfiniteScroll(document.getElementById('element'), {
        infinite-direction: '...',
      });
    

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


      $('.example-class').infiniteScroll(options);
    

选件

Name Type Default Description
infinite-direction String 'y' Defines an example scroll direction.

方法

Name Description Example
dispose Removes an instance of the lazy element infiniteScrollInstance.toggle()

      const infiniteScrollElement = document.getElementById('element');
      const infiniteScrollInstance = new mdb.InfiniteScroll(infiniteScrollElement);
      infiniteScrollInstance.dispose();
    

大事记

Name Description
complete.mdb.infiniteScroll This event fires immediately after scrolling to the end of the container.

      const infiniteScrollElement = document.getElementById('element');
      infiniteScrollElement.addEventListener('complete.mdb.infiniteScroll', (e) => {
        // do something...
      });
    

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


      import { InfiniteScroll } from 'mdb-ui-kit';