Framework7-刷新 - 芒果文档

📌 相关文章

📜 Framework7-刷新

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

描述

它是一个特殊的组件，用于通过拉动刷新（重新加载）页面内容。

以下代码显示了如何刷新页面内容-

...

以下类用于刷新-

page-content-它具有一个附加的pull-to-refresh-content类，并且它需要启用pull刷新。
pull-to-refresh-layer-这是一个隐藏层，用于拉动以刷新视觉元素，它只是一个预加载器和一个箭头。
data-ptr-distance =“ 55” -这是一个附加属性，可让您设置自定义“拉动刷新”触发距离，其默认值为44px。

拉刷新事件

在“刷新”中，有一些JavaScript事件，如下表所示-

S.No	Event & Description	Target
1	pullstart It will be triggered whenever you start pulling to refresh content.	Pull To Refresh content.
2	pullmove It is triggered when you are pulling to refresh content.	Pull To Refresh content.
3	pullend It will be triggered whenever you release pull to refresh content.	Pull To Refresh content.
4	refresh This event will be triggered when the pull to refresh enters in the “refreshing” state.	Pull To Refresh content.
5	refreshdone It will be triggered after it is refreshed and it goes back to the initial state. This will be done after calling pullToRefreshDone method.	Pull To Refresh content.

有一些App的方法可以与“拉动刷新”一起使用。

S.No	App’s Methods & Description
1	myApp.pullToRefreshDone(ptrContent) It is used to reset pull-to-refresh content.
2	myApp.pullToRefreshTrigger(ptrContent) It is used to trigger to refresh on specified pull to refresh content.
3	myApp.destroyPullToRefresh(ptrContent) It is used to destroy/disable pull to refresh on specified pull to refresh content.
4	myApp.initPullToRefresh(ptrContent) It is used to initialize/enable pull to refresh content.

其中ptrContent用于HTMLElement或字符串以提取到刷新内容以重置/触发或禁用/启用。

例

以下示例演示了刷新组件的使用，该组件启动页面内容的刷新-


      
      
      Pull To Refresh
      
      
   
   
      
         
            
               
                  
                      
                     Pull To Refresh
                      
                  
               
               
                  
                     
                     
                  
                  
                     
                        
                           
                           
                              
                                 apple
                              
                           
                        
                        
                           
                           
                              
                                 strawberry
                              
                           
                        
                        
                           
                           
                              
                                 Mango
                              
                           
                        
                     
                     
                        Just pull page down to let the magic happen.

输出

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

将上述给定的HTML代码另存为服务器根文件夹中的pull_to_refresh.html文件。
以http：//localhost/pull_to_refresh.html格式打开此HTML文件，并显示如下所示的输出。
当用户下拉菜单时，页面将被刷新。