分享 UniApp 实现列表长按删除功能

在移动应用开发中，列表是常见的展示形式，而长按删除列表项也是一个实用且常见的交互功能。今天就来和大家分享如何在 UniApp 中实现列表的长按删除功能，同时附上详细的代码。

效果预览

通过代码实现后，我们将得到一个带有红色边框、圆角设计的列表。当用户长按列表中的某一项时，会弹出确认删除的提示框，用户确认后，对应的列表项将从列表中移除。

核心代码分析

1. 模板部分（<template>）

<template><view><!-- 列表展示 --><view v-for="(item, index) in itemList" :key="index" @longpress="confirmDelete(index)" class="item">{{ item }}</view></view>
</template>

2. 脚本部分（<script>）

<script>
export default {data() {return {// 模拟列表数据itemList: ['列表项1', '列表项2', '列表项3', '列表项4']};},methods: {// 确认删除方法confirmDelete(index) {uni.showModal({title: '提示',content: '确定要删除该项吗？',success: (res) => {if (res.confirm) {// 用户点击确认，删除对应列表项this.itemList.splice(index, 1);} }});}}
};
</script>

3. 样式部分（<style>）

<style>
.item{width: 90%;padding: 20px;border-radius: 12px;background-color: white;font-size: 20px;justify-content: center;display: flex;border: 3rpx solid red;margin-bottom: 10rpx;
}	
</style>

总结

通过以上代码，我们可以在 UniApp 中轻松实现列表的长按删除功能。这种交互方式能提升用户体验，让用户更方便地管理列表数据。大家可以根据实际需求对列表的样式和数据进行调整，也可以在此基础上添加更多的交互逻辑。希望这个分享对你的 UniApp 开发有所帮助，如果你在使用过程中有任何问题，欢迎在评论区留言交流。

你可以将上述代码复制到自己的 UniApp 项目中进行测试和使用，快去试试吧！