qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

SwipeAction 滑动操作

提供一颗可以通过滑动触发选项的容器

使用指南

在 Taro 文件中引入组件

import { AtSwipeAction } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/swipe-action.scss";

一般用法

<AtSwipeAction :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]">
  <view class='normal'>AtSwipeAction 一般使用场景</view>
</AtSwipeAction>

禁止滑动

<AtSwipeAction disabled :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]">
  <view class='normal'>禁止滑动展示</view>
</AtSwipeAction>

自动关闭

<AtSwipeAction autoClose :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]">
  <view class='normal'>点击按钮自动关闭</view>
</AtSwipeAction>

传递点击事件

<AtSwipeAction @click="handleClick" :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]">
  <view class='normal'>点击事件触发</view>
</AtSwipeAction>

开启和关闭事件

<AtSwipeAction
  :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]"
  @opened="handleOpened"
  @closed="handleClosed"
>
  <view class='normal'>开启和关闭时触发事件</view>
</AtSwipeAction>

与 List 组件使用

<AtList>
  <AtSwipeAction :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]">
    <AtListItem title='Item1' />
  </AtSwipeAction>
  <AtSwipeAction :options="[
  {
    text: '取消',
    style: {
      backgroundColor: '#6190E8'
    }
  },
  {
    text: '确认',
    style: {
      backgroundColor: '#FF4949'
    }
  }
]">
    <AtListItem title='Item2' />
  </AtSwipeAction>
  <AtSwipeAction
    :options="[
      {
        text: '警告',
        style: {
          backgroundColor: '#FFC82C'
        }
      }
    ]"
  >
    <AtListItem title='Item3' />
  </AtSwipeAction>
</AtList>

控制只显示单个

<AtList>
  <AtSwipeAction
    v-for="(item, index) in list"
    :key="item.title + index"
    :options="item.options"
    :is-opened="item.isOpened"
    @click="handleClicked"
    @opened="handleSingle"
  >
    <AtListItem :title="item.title" />
  </AtSwipeAction>
</AtList>

参数

参数说明类型可选值默认值
isOpened是否开启Boolean-true
disabled是否禁止滑动Boolean-false
autoClose点击选项时,是否自动关闭Boolean-false
options展示的选项数组[{'{ text , style? , className? }'}]-[]

事件

事件名称说明返回参数
onClick点击触发事件-
onOpened完全打开时触发-
onClosed完全关闭时触发-