uni-swipe-action添加点击事件,实现删除效果
时间: 2024-02-24 17:55:46 浏览: 252
uni-swipe-action组件实现列表项左划操作
5星 · 资源好评率100%
要实现 `uni-swipe-action` 的点击事件,可以在 `uni-swipe-action` 标签中添加 `@click` 事件,并在事件方法中调用 `uni.removeStorageSync()` 方法删除相应的数据。以下是一个简单的示例:
```html
<template>
<view class="container">
<view class="list-item" v-for="(item, index) in list" :key="item.id">
<uni-swipe-action :actions="actions" @click="handleClick(index)">
<view class="item-content">{{ item.content }}</view>
</uni-swipe-action>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, content: 'item 1' },
{ id: 2, content: 'item 2' },
{ id: 3, content: 'item 3' },
],
actions: [
{ name: '删除', color: '#F4333C' },
],
};
},
methods: {
handleClick(index) {
uni.removeStorageSync(`item_${this.list[index].id}`);
this.list.splice(index, 1);
},
},
};
</script>
```
在该示例中,我们在 `uni-swipe-action` 标签中添加了 `@click` 事件,并在事件方法 `handleClick` 中调用 `uni.removeStorageSync()` 方法删除相应的数据,并通过 `this.list.splice(index, 1)` 方法将该项从列表中删除。
阅读全文