shop-wx/doc/wot-design-uni/docs/component/swipe-action.md

SwipeAction 滑动操作

常用于单元格左右滑删除等手势操作。

:::warning 滑动操作组件对页面的功能隐藏较深，用户难以发现，建议使用其他交互方式来实现操作功能，比如列表项有个按钮，点击按钮弹出 ActionSheet。

如果坚持要使用滑动操作组件，建议在用户进入页面时加上操作提示以提示用户列表项可以左右滑动。 :::

基本用法

wd-swipe-action分为三部分：自定义左按钮内容、自定义内容、自定义右按钮内容。自定义按钮内容需要设置slot开启，自定义内容为默认插槽，无需手动开启。

因为uni-app组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 swipeAction ，建议使用组件库的 useQueue hook（会关闭所有 dropmenu、popover、toast、swipeAction、fab），在页面的根元素上监听点击事件的冒泡。

:::warning 如果存在用户手动点击 swipeAction 以外某个地方如按钮滑出 swipeAction 的场景，则需要在点击的元素（在这里上按钮）加上 @click 阻止事件冒泡到根元素上，避免触发 closeOutside把要手动打开的 swipeAction 关闭了。 :::

<view @click.stop="closeOutside">
  <wd-swipe-action>
    <wd-cell title="标题文字" value="内容"/>
    <template #right>
      <view class="action">
        <view class="button" style="background: #C8C7CD;" @click="handleAction('操作1')">操作1</view>
        <view class="button" style="background: #FFB300;" @click="handleAction('操作2')">操作2</view>
        <view class="button" style="background: #E2231A;" @click="handleAction('操作3')">操作3</view>
      </view>
    </template>

  </wd-swipe-action>
</view>

import { useToast, useQueue } from '@/uni_modules/wot-design-uni'


const { closeOutside } = useQueue()

const toast = useToast()

function handleAction(action: string) {
  toast.show(`点击了${action}`)
}

.action {
  height: 100%;
}
.button {
  display: inline-block;
  padding: 0 11px;
  height: 100%;
  color: white;
  line-height: 42px;
}

左右滑动

wd-swipe-action组件提供left/right两个滑动按钮，通过设置插槽left和right开启

<wd-swipe-action>
  <template #left>
    <view class="action">
      <view class="button" style="background: #C8C7CD;">操作1</view>
      <view class="button" style="background: #FFB300;">操作2</view>
      <view class="button" style="background: #E2231A;">操作3</view>
    </view>
  </template>
  <wd-cell title="标题文字" value="内容" />
  <template #right>
    <view class="action">
      <view class="button" style="background: #cdb86e;">操作4</view>
      <view class="button" style="background: #42ffd1;">操作5</view>
      <view class="button" style="background: #383fe2;">操作6</view>
    </view>
  </template>
</wd-swipe-action>

切换按钮

可以通过设置v-model来控制开启关闭滑动按钮，可选值为:left、close、right分别表示："打开左滑动按钮"、"关闭滑动按钮""打开右滑动按钮"

<wd-swipe-action v-model="value">
  <template #left>
    <view class="action">
      <view class="button" style="background: #C8C7CD;">操作1</view>
      <view class="button" style="background: #FFB300;">操作2</view>
      <view class="button" style="background: #E2231A;">操作3</view>
    </view>
  </template>
  <wd-cell title="标题文字" value="内容" />
  <template #right>
    <view class="action">
      <view class="button" style="background: #cdb86e;">操作4</view>
      <view class="button" style="background: #42ffd1;">操作5</view>
      <view class="button" style="background: #383fe2;">操作6</view>
    </view>
  </template>
</wd-swipe-action>

<view class="button-group">
  <wd-button @click="changeState('left')">打开左边</wd-button>
  <wd-button @click="changeState('close')">关闭所有</wd-button>
  <wd-button @click="changeState('right')">打开右边</wd-button>
</view>

const value = ref<string>('close')
function changeState(position: string) {
  value.value = position
}

按钮关闭前的钩子函数

通过before-close属性传入一个函数，注意传入的变量必须定义在data在。回调函数会在滑动按钮关闭前执行。

钩子函数接收两个参数:reason、position。 reason表示滑动按钮关闭的原因，值为:click、swipe、value，分别代表:点击关闭按钮、滑动关闭按钮、通过控制value关闭按钮; position代表被关闭的操作按钮，值为：left、right。当reason为click时，表示点击position位置关闭滑动按钮，值为：left、right、inside。

<demo-block transparent title="切换按钮">
  <wd-swipe-action v-model="value" :before-close="beforeClose">
    <template #left>
      <view class="action">
        <view class="button" style="background: #C8C7CD;">操作1</view>
        <view class="button" style="background: #FFB300;">操作2</view>
        <view class="button" style="background: #E2231A;">操作3</view>
      </view>
    </template>
    <wd-cell title="标题文字" value="内容" />
    <template #right>
      <view class="action">
        <view class="button" style="background: #cdb86e;">操作4</view>
        <view class="button" style="background: #42ffd1;">操作5</view>
        <view class="button" style="background: #383fe2;">操作6</view>
      </view>
    </template>
  </wd-swipe-action>

  <view class="button-group">
    <wd-button @click="changeState('left')">打开左边</wd-button>
    <wd-button @click="changeState('close')">关闭所有</wd-button>
    <wd-button @click="changeState('right')">打开右边</wd-button>
  </view>
</demo-block>

import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

const value = ref<string>('close')
function changeState(position: string) {
  value.value = position
}

const beforeClose = (reason, position) => {
  if (reason === 'click') {
    toast.show(`${reason} ${position}导致滑动按钮关闭`)
  } else {
    toast.show(`${reason}导致${position}滑动按钮关闭`)
  }
}

点击事件

click事件只会在关闭滑动按钮时触发。

回调函数的参数表示点击的位置，其中left、right表示点击了左右滑动按钮，inside表示点击了容器内按钮以外的地方。

<wd-swipe-action @click="handleClick">
  <wd-cell title="标题文字" value="内容" />
  <template #right>
    <view class="action">
      <view class="button" style="background: #C8C7CD;">操作1</view>
      <view class="button" style="background: #FFB300;">操作2</view>
      <view class="button" style="background: #E2231A;">操作3</view>
    </view>
  </template>
</wd-swipe-action>

import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

function handleClick({ value }) {
  toast.show(`点击${value}关闭操作按钮`)
}

禁用滑动按钮

设置disabled属性禁用滑动

<wd-swipe-action disabled>
  <wd-cell title="标题文字" value="内容" />
  <template #right>
    <view class="action">
      <view class="button" style="background: #C8C7CD;">操作1</view>
      <view class="button" style="background: #FFB300;">操作2</view>
      <view class="button" style="background: #E2231A;">操作3</view>
    </view>
  </template>
</wd-swipe-action>

Attributes

参数	说明	类型	可选值	默认值	最低版本
v-model	滑动按钮的状态	string	left / close / right	close	-
disabled	是否禁用滑动操作	boolean	-	false	-
before-close	关闭滑动按钮前的钩子函数	function	-	-	-

Events

事件名称	说明	参数	最低版本
click	当滑动按钮打开时，点击整个滑动操作容器触发 click 事件	event={value}, value 可能为 'left'、'inside'、'right'	-

Slot

name	说明	最低版本
left	自定义左按钮	-
default	自定义内容	-
right	自定义右按钮	-

Cell 外部样式类

类名	说明	最低版本
custom-class	根节点样式	-