📜  Framework7无限滚动

📅  最后修改于: 2021-01-02 06:43:55             🧑  作者: Mango

Framework7无限滚动

当页面靠近底部时,当您要加载其他内容并执行所需的操作时,将使用“无限滚动”。

句法:

...

这里:

页面内容无限滚动:用于无限滚动容器。

data-distance:此属性用于配置距页面底部的距离(以px为单位)以触发无限滚动事件,其默认值为50px。

在顶部添加无限滚动

您还可以在页面顶部使用无限滚动,只需在“页面内容”中添加其他“无限滚动顶部”类。

...

无限滚动事件

无限:用于在页面滚动到达底部指定距离时触发。它将通过div class =“ page-content infinite-scroll ”作为目标。

有两种可与无限滚动容器一起使用的App方法:

要将无限滚动事件侦听器添加到指定的HTML容器,请使用以下方法:

myApp.attachInfiniteScroll(container) 

您可以使用以下方法从指定的HTML容器中删除无限滚动事件侦听器:

myApp.detachInfiniteScroll(container) 

这里的参数是用作无限滚动容器的HTMLElement或字符串的必需选项。

Framework7无限滚动示例

让我们以一个示例来演示无限滚动,该无限滚动在页面滚动接近底部时加载其他内容:




   
      
      
      
      infinite_scroll