Question

Ionic4项目中我们可以使用Ionic4列表项组件ion-item-sliding对项目进行布局。

ion-item-sliding官方文档地址:https://ionicframework.com/docs/api/item-sliding

A sliding item contains an item that can be dragged to reveal buttons. It requires an item component as a child. All options to reveal should be placed in the item options element.

Swipe Direction

By default, the buttons are placed on the "end" side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to "start" on the [ion-item-options]((../item-options) element. Up to two ion-item-options can be used at the same time in order to reveal two different sets of options depending on the swiping direction.

Options Layout

By default if an icon is placed with text in the item option, it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.

Slot	description
start	In LTR, start is the left side of the button, and in RTL it is the right
top	The icon is above the text
icon-only	The icon is the only content of the button
bottom	The icon is below the text
end	In LTR, end is the right side of the button, and in RTL it is the left

Expandable Options

Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the ionSwipe event to call methods on the class.

ion-item-sliding　用法(Usage)

angularjavascriptreactvue

  
  
    
      Favorite
      Share
    

    
      Item Options
    

    
      Unread
    
  

  
  
    
      
        Delete
      
    

    
      Expandable Options
    

    
      
        Archive
      
    
  

  
  
    
      
        
HubStruck Notifications
        
A new message in your network
        
Oceanic Next has joined your network
      
      
        10:45 AM
      
    

    
      
        
      
    

    
      
        
      
      
        
      
    
  

  
  
    
      
        Sliding Item, Icons Start
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  

  
  
    
      
        Sliding Item, Icons End
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  

  
  
    
      
        Sliding Item, Icons Top
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  

  
  
    
      
        Sliding Item, Icons Bottom
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  
</ion-list>

  
  
    
      Favorite
      Share
    

    
      Item Options
    

    
      Unread
    
  

  
  
    
      
        Delete
      
    

    
      Expandable Options
    

    
      
        Archive
      
    
  

  
  
    
      
        
HubStruck Notifications
        
A new message in your network
        
Oceanic Next has joined your network
      
      
        10:45 AM
      
    

    
      
        
      
    

    
      
        
      
      
        
      
    
  

  
  
    
      
        Sliding Item, Icons Start
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  

  
  
    
      
        Sliding Item, Icons End
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  

  
  
    
      
        Sliding Item, Icons Top
      
    
    
      
        
        More
      
      
        
        Archive
      
    
  

  
  
    
      
        Sliding Item, Icons Bottom
      
    
    
      
        
        More
      
      
        <span class="