uniapp 实现左测删除
时间: 2023-08-02 21:10:45 浏览: 109
要实现左滑删除功能,可以使用 uni-app 的 uni-list
组件,结合 uni-swipe-action
组件来实现。具体步骤如下:
- 在
uni-list
组件中设置@click-right
事件,用来监听滑动删除操作。 - 使用
uni-swipe-action
组件包裹需要删除的元素,并设置right
属性来定义滑动删除的样式。 - 在
@click-right
事件中,通过数组的splice()
方法来删除对应的元素。
下面是一个简单的示例代码:
<template>
<view>
<uni-list>
<uni-swipe-action
v-for="(item, index) in list"
:key="index"
:right="[
{
text: '删除',
style: {
backgroundColor: '#F4333C'
},
click: () => {
deleteItem(index)
}
}
]"
>
<view>{{ item }}</view>
</uni-swipe-action>
</uni-list>
</view>
</template>
<script>
export default {
data() {
return {
list: ['item1', 'item2', 'item3']
}
},
methods: {
deleteItem(index) {
this.list.splice(index, 1)
}
}
}
</script>
这样,当用户向左滑动某个元素时,就会出现一个红色的“删除”按钮,点击后对应的元素就被删除了。
相关推荐











