该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。

左侧滑动

左滑单元格显示右侧操作菜单，是最常见的滑动场景，通常用于删除、编辑等操作。

<template>
	<un-swipe-action ref="swipeActionLeftRef">
		<un-swipe-action-item v-for="(item, index) in swipeItemsLeft" :key="index">
			<un-cell :title="item.text"></un-cell>
			<template #right>
				<view class="button button--edit">
					<text class="button_text" @click="handleEdit(item)">编辑</text>
				</view>
				<view class="button button--delete">
					<text class="button_text" @click="handleDelete(item, index)" >删除</text>
				</view>
			</template>
		</un-swipe-action-item>
	</un-swipe-action>
</template>

<script setup lang="uts">
import { ref } from 'vue'

type SwipeActionItem = {
	text: string,
	name: string
}

const swipeActionLeftRef = ref<UnSwipeActionComponentPublicInstance | null>(null)

const swipeItemsLeft = ref<SwipeActionItem[]>([
	{ text: '左侧滑动1', name: 'item1' },
	{ text: '左侧滑动2', name: 'item2' },
	{ text: '左侧滑动3', name: 'item3' }
])

const handleEdit = (item: SwipeActionItem) => {
	swipeActionLeftRef.value?.close()
	uni.showToast({
		title: '编辑 ' + item.text,
		icon: 'none'
	})
}

const handleDelete = (item: SwipeActionItem, index: number) => {
	uni.showModal({
		title: '温馨提示',
		content: '确定要删除吗？',
		success: res => {
			if (res.confirm) {
				swipeActionLeftRef.value?.close(index)
				swipeItemsLeft.value.splice(index, 1)
				uni.showToast({
					title: '删除 ' + item.text,
					icon: 'none'
				})
			}
		}
	})
}
</script>

<style lang="scss">
.button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 60px;
}

.button--edit {
	background-color: #3c9cff;
}

.button--delete {
	background-color: #f56c6c;
}

.button_text {
	color: #fff;
	font-size: 12px;
}
</style>

右侧滑动

右滑单元格显示左侧操作菜单，适用于需要从右侧触发操作的场景。

<template>
	<un-swipe-action ref="swipeActionRightRef">
		<un-swipe-action-item v-for="(item, index) in swipeItemsRight" :key="index">
			<un-cell :title="item.text"></un-cell>
			<template #left>
				<view class="button button--edit">
					<text class="button_text" @click="handleEdit2(item)">编辑</text>
				</view>
				<view class="button button--delete">
					<text class="button_text" @click="handleDelete2(item, index)" >删除</text>
				</view>
			</template>
		</un-swipe-action-item>
	</un-swipe-action>
</template>

<script setup lang="uts">
import { ref } from 'vue'

type SwipeActionItem = {
	text: string,
	name: string
}

const swipeActionRightRef = ref<UnSwipeActionComponentPublicInstance | null>(null)

const swipeItemsRight = ref<SwipeActionItem[]>([
	{ text: '右侧滑动1', name: 'item1' },
	{ text: '右侧滑动2', name: 'item2' },
	{ text: '右侧滑动3', name: 'item3' }
])

const handleEdit2 = (item: SwipeActionItem) => {
	swipeActionRightRef.value?.close()
	uni.showToast({
		title: '编辑 ' + item.text,
		icon: 'none'
	})
}

const handleDelete2 = (item: SwipeActionItem, index: number) => {
	swipeActionRightRef.value?.close()
	uni.showToast({
		title: '删除 ' + item.text,
		icon: 'none'
	})
}
</script>

<style lang="scss">
.button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 60px;
}

.button--edit {
	background-color: #3c9cff;
}

.button--delete {
	background-color: #f56c6c;
}

.button_text {
	color: #fff;
	font-size: 12px;
}
</style>

左右两侧都可滑动

支持左右双向滑动，同时显示两侧的操作菜单，功能更加全面灵活。

<template>
	<un-swipe-action ref="swipeActionDoubleRef">
		<un-swipe-action-item
			v-for="(item, index) in swipeItemsDouble"
			:key="index"
		>
			<un-cell :title="item.text"></un-cell>
			<template #left>
				<view class="button button--favorite">
					<text class="button_text" @click="handleFavorite(item)">收藏</text>
				</view>
			</template>
			<template #right>
				<view class="button button--edit">
					<text class="button_text" @click="handleEdit2(item)">编辑</text>
				</view>
				<view class="button button--delete">
					<text class="button_text" @click="handleDelete2(item, index)" >删除</text>
				</view>
			</template>
		</un-swipe-action-item>
	</un-swipe-action>
</template>

<script setup lang="uts">
import { ref } from 'vue'

type SwipeActionItem = {
	text: string,
	name: string
}

const swipeActionDoubleRef = ref<UnSwipeActionComponentPublicInstance | null>(null)

const swipeItemsDouble = ref<SwipeActionItem[]>([
	{ text: '左右滑动1', name: 'item1' },
	{ text: '左右滑动2', name: 'item2' },
	{ text: '左右滑动3', name: 'item3' }
])

const handleEdit2 = (item: SwipeActionItem) => {
	swipeActionDoubleRef.value?.close()
	uni.showToast({
		title: '编辑 ' + item.text,
		icon: 'none'
	})
}

const handleDelete2 = (item: SwipeActionItem, index: number) => {
	swipeActionDoubleRef.value?.close()
	uni.showToast({
		title: '删除 ' + item.text,
		icon: 'none'
	})
}

const handleFavorite = (item: SwipeActionItem) => {
	swipeActionDoubleRef.value?.close()
	uni.showToast({
		title: '收藏 ' + item.text,
		icon: 'none'
	})
}
</script>

<style lang="scss">
.button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 60px;
}

.button--edit {
	background-color: #3c9cff;
}

.button--delete {
	background-color: #f56c6c;
}

.button--favorite {
	background-color: #ffc107;
}

.button_text {
	color: #fff;
	font-size: 12px;
}
</style>

API

SwipeAction Props

参数	说明	类型	默认值
autoClose	是否自动关闭其他swipe按钮组	Boolean	true
disabled	是否禁用整个滑动组件	Boolean	false
threshold	滑动距离阈值，该阈值并不是滑动距离，而是超过按钮宽度的比例，默认值为 0.3	Number	0.3

SwipeAction 方法

方法名	说明	参数
open	打开指定方向和索引的滑动菜单	Function
close	关闭指定索引的滑动菜单	Function

SwipeActionItem Props

参数	说明	类型	默认值
disabled	是否禁用	Boolean	false
autoClose	是否自动关闭其他swipe按钮组	Boolean	true
closeOnClick	点击后关闭当前按钮组	Boolean	true
threshold	滑动距离阈值，该阈值并不是滑动距离，而是超过按钮宽度的比例，默认值为 0.3	Number	0.3

SwipeActionItem Event

事件名	说明	回调参数
change	组件打开或关闭时触发	Function