Framework7-无限滚动

📌 相关文章

📜 Framework7-无限滚动

📅 最后修改于: 2020-10-25 02:57:55 🧑 作者: Mango

描述

当页面接近底部时，无限滚动使您可以加载其他内容并执行所需的操作。

以下HTML布局显示了无限滚动-

...

上面的布局包含以下类-

page-content infinite-scroll-用于无限滚动容器。
data-distance-此属性允许您配置距页面底部的距离（以像素为单位）以触发无限滚动事件，其默认值为50像素。

如果要在页面顶部使用无限滚动，则需要在“页面内容”中添加其他“无限滚动顶部”类-

...

无限滚动事件

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

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

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

myApp.attachInfiniteScroll(container)

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

myApp.detachInfiniteScroll(container)

其中需要参数的选项用作无限滚动容器的HTMLElement或字符串。

例

以下示例演示了当页面滚动接近底部时无限滚动加载其他内容的方法-


      
      
      infinite_scroll
      
      
   
   
   
      
         
         
            
               
                   
                  Infinite Scroll
                   
               
            
         
            
               
                  
                     
                        
                           
                              
                                 Item 1
                              
                           
                        
                           
                              
                                 Item 2
                              
                           
                        
                           
                              
                                 Item 3
                              
                           
                        
                           
                              
                                 Item 4
                              
                           
                        
                           
                              
                                 Item 5
                              
                           
                        
                           
                              
                                 Item 6
                              
                           
                        
                           
                              
                                 Item 7
                              
                           
                        
                           
                              
                                 Item 8
                              
                           
                        
                           
                              
                                 Item 9
                              
                           
                        
                           
                              
                                 Item 10
                              
                           
                        
                           
                              
                                 Item 11
                              
                           
                        
                           
                              
                                 Item 12
                              
                           
                        
                           
                              
                                 Item 13
                              
                           
                        
                           
                              
                                 Item 14
                              
                           
                        
                           
                              
                                 Item 15
                              
                           
                        
                           
                              
                                 Item 16
                              
                           
                        
                           
                              
                                 Item 17
                              
                           
                        
                           
                              
                                 Item 18
                              
                           
                        
                           
                              
                                 Item 19
                              
                           
                        
                           
                              
                                 Item 20

输出

让我们执行以下步骤，看看上面给出的代码如何工作-

将上述给定的HTML代码另存为服务器根文件夹中的infinite_scroll.html文件。
以http：//localhost/infinite_scroll.html的形式打开此HTML文件，并显示如下所示的输出。
该示例允许在页面滚动到达底部指定距离时加载其他内容。