Framework7刷新 - 芒果文档

📌 相关文章

📜 Framework7刷新

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

Framework7刷新/重新加载

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

句法：

...

以下是刷新组件中使用的类的列表：

页面内容：它还有一个附加的“刷新要刷新的内容”类，并且它需要启用刷新才能刷新。

pull-to-refresh-layer：这是一个隐藏层，用于拉动以刷新视觉元素，它只是一个预加载器和一个箭头。

data-ptr-distance =“ 55”：这是附加属性，可让您设置自定义“拉动刷新”触发距离，其默认值为44px。

拉刷新事件

以下是一些“拉动刷新” JavaScript事件的列表：

Index	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方法的列表：

Index	Method	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.

Framework7刷新示例

让我们以一个示例来演示刷新组件的使用，该组件启动页面内容的刷新：



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