SwipeAction 滑动操作

示例

搭配列表使用

<List header="搭配列表使用">
  {#each ['A', 'B', 'C'] as txt}
    <SwipeAction>
      <ListItem>{txt}</ListItem>
      {#snippet leftActions()}
        <Button class="border-0" color="primary" block>置顶</Button>
      {/snippet}
      {#snippet rightActions()}
        <Space class="gap-0" block>
          <Button color="cancel" block {onclick}>取消关注</Button>
          <Button color="warning" block {onclick}>免打扰</Button>
          <Button color="danger" block {onclick}>删除</Button>
        </Space>
      {/snippet}
    </SwipeAction>
  {/each}
</List>

图片预览

<SwipeAction>
  <Image src="/images/sun-parakeet.jpg" alt="小太阳鹦鹉" />
  {#snippet rightActions()}
    <Button color="danger" block {onclick}>删除</Button>
  {/snippet}
</SwipeAction>

手动控制归位逻辑

<script lang="ts">
  let swipeActionStatus = $state<SwipeActionStatus>('close')
</script>

<SwipeAction bind:status={swipeActionStatus} keepOnAction keepOnTouchOutside>
  <ListItem>ABC</ListItem>
  {#snippet leftActions()}
    <Button color="primary" block>置顶</Button>
  {/snippet}
  {#snippet rightActions()}
    <Space class="gap-0" block>
      <Button color="cancel" block {onclick}>取消关注</Button>
      <Button color="warning" block {onclick}>免打扰</Button>
      <Button color="danger" block {onclick}>删除</Button>
    </Space>
  {/snippet}
</SwipeAction>

<Space block>
  <Button onclick={() => (swipeActionStatus = 'close')}>归位</Button>
  <Button onclick={() => (swipeActionStatus = 'left')}>左侧打开</Button>
  <Button onclick={() => (swipeActionStatus = 'right')}>右侧打开</Button>
</Space>

SwipeAction

属性