SwipeAction滑动操作

滑动操作组件。

定义

结合手势操作，从屏幕一侧唤出操作。

规则

1. 一次只可滑动一行列表
2. 点击任意按钮之外处或往回滑动该列表可隐藏操作。

代码演示

基本用法

最简单的用法。

import { Component } from '@angular/core';
@Component({
  selector: 'demo-swipe-action-basic',
  template: `
    <NoticeBar
      *ngIf="!isMobile"
      style="margin-bottom: 10px"
      [option]="{ content: '该组件只支持Touch事件，请使用移动模式/设备打开此页。', marqueeProps: { fps: 100 } }"
    ></NoticeBar>
    <br />
    <List>
      <SwipeAction style="background-color: gray" [right]="right" [left]="left" (onOpen)="open()" (onClose)="close()">
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Have left and right buttons
        </ListItem>
      </SwipeAction>
      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [left]="left"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Only left buttons
        </ListItem>
      </SwipeAction>
      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [right]="right"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Only right buttons
        </ListItem>
      </SwipeAction>
      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [right]="rightDifferentWidth"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Different button width
        </ListItem>
      </SwipeAction>
      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [right]="right"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="itemClick()">
          List.Item with onClick
        </ListItem>
      </SwipeAction>
    </List>
  `,
  styles: [
    `
      /deep/.btnClass {
        background-color: #f4333c;
        color: white;
      }
    `
  ]
})
export class DemoSwipeActionBasicComponent {
  isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(window.navigator.userAgent);
  right = [
    {
      text: 'Cancel',
      onPress: () => console.log('cancel'),
      style: { backgroundColor: '#ddd', color: 'white' }
    },
    {
      text: 'Delete',
      onPress: () => console.log('delete'),
      className: 'btnClass'
    }
  ];
  rightDifferentWidth = [
    {
      text: 'short',
      onPress: () => console.log('cancel'),
      style: { backgroundColor: '#ddd', color: 'white' }
    },
    {
      text: 'long text',
      onPress: () => console.log('delete'),
      className: 'btnClass'
    }
  ];
  left = [
    {
      text: 'Reply',
      onPress: () => console.log('reply'),
      style: { backgroundColor: '#108ee9', color: 'white' }
    },
    {
      text: 'Cancel',
      onPress: () => console.log('cancel'),
      style: { backgroundColor: '#ddd', color: 'white' }
    }
  ];
  open() {
    console.log('open');
  }
  close() {
    console.log('close');
  }
  click() {
    console.log('clicked!');
  }
  itemClick() {
    console.log('ListItem clicked!');
  }
}

API

SwipeAction

Button