外观
SwipeAction 滑动单元格
约 994 字大约 3 分钟
2025-10-31
该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。
左侧滑动
左滑单元格显示右侧操作菜单,是最常见的滑动场景,通常用于删除、编辑等操作。
<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 |
