uni-swipe-action添加点击事件,实现删除效果
时间: 2024-02-24 08:55:46 浏览: 322
要实现 uni-swipe-action
的点击事件,可以在 uni-swipe-action
标签中添加 @click
事件,并在事件方法中调用 uni.removeStorageSync()
方法删除相应的数据。以下是一个简单的示例:
<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)
方法将该项从列表中删除。
阅读全文
相关推荐
















