uni-app中点击删除按钮后删除按钮消失
uni-app中点击删除按钮后删除按钮消失
uni-swipe-action
在元素滑动后，展示“删除”按钮，点击“删除”按钮，会弹出提示对话框“是否删除”，为了方便用户明确当前需要删除的数据是哪一条，需要在弹出对话框的同时，“删除”按钮不隐藏，如何实现？现在是会自动收缩回去的。
20 回复
回复 HRK_01: 更新了的，编译后是catchtouchstart，小米、苹果微信小程序没问题，一加、华为微信小程序依然自动缩回，支付宝小程序上述手机点击按钮均缩回
uni-swipe-action
在元素滑动后，展示“删除”按钮，点击“删除”按钮，会弹出提示对话框“是否删除”，为了方便用户明确当前需要删除的数据是哪一条，需要在弹出对话框的同时，“删除”按钮不隐藏，如何实现？现在是会自动收缩回去的。
https://uniapp.dcloud.io/component/uniui/uni-swipe-action.html#示例 变量是 left/right/none
在 uni-app 中，你可以通过控制数据的绑定来实现点击删除按钮后按钮消失的效果。具体步骤如下：
1. 在 data 中定义一个变量来控制按钮的显示状态
export default {
data() {
return {
showDeleteButton: true // 初始状态下显示删除按钮
};
}
};2. 在模板中使用 v-if 或 v-show 来控制按钮的显示
<template>
<view>
<button v-if="showDeleteButton" [@click](/user/click)="handleDelete">删除</button>
</view>
</template>3. 在 handleDelete 方法中更新 showDeleteButton 的值
export default {
data() {
return {
showDeleteButton: true
};
},
methods: {
handleDelete() {
// 在这里执行删除操作
console.log('删除操作执行了');
// 删除操作完成后，隐藏删除按钮
this.showDeleteButton = false;
}
}
};4. 完整示例代码
<template>
<view>
<button v-if="showDeleteButton" [@click](/user/click)="handleDelete">删除</button>
</view>
</template>
<script>
export default {
data() {
return {
showDeleteButton: true
};
},
methods: {
handleDelete() {
// 在这里执行删除操作
console.log('删除操作执行了');
// 删除操作完成后，隐藏删除按钮
this.showDeleteButton = false;
}
}
};
</script>
<style>
/* 样式可以根据需要添加 */
</style>解释
v-if="showDeleteButton"：根据showDeleteButton的值决定是否渲染删除按钮。当showDeleteButton为false时，按钮将不会出现在 DOM 中。handleDelete方法：在点击删除按钮时触发，执行删除操作后，将showDeleteButton设置为false，从而隐藏按钮。
其他选择
如果你希望按钮只是隐藏而不是从 DOM 中移除，可以使用 v-show 代替 v-if：
<button v-show="showDeleteButton" [@click](/user/click)="handleDelete">删除</button>