点击删除按钮不收缩滑动菜单——uni-app uni-swipe-action组件新妙用

2024-01-06 02:58:34

使用 uni-swipe-action 组件实现点击删除按钮不收缩滑动菜单

简介

uni-app 的 uni-swipe-action 组件可以创建滑动删除功能，允许用户向左滑动内容区域以显示右侧的删除按钮。默认情况下，点击删除按钮后，组件会自动收缩。但是，有时我们可能需要点击删除按钮时不收缩滑动菜单。本文将详细介绍如何实现这一功能。

实现步骤

1. 引入 uni-swipe-action 组件

首先，在你的 uni-app 项目中引入 uni-swipe-action 组件：

import uniSwipeAction from '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action';

Vue.component('uni-swipe-action', uniSwipeAction);

2. 创建 uni-swipe-action 组件

在需要使用滑动删除功能的位置，添加以下 HTML 代码：

<uni-swipe-action ref="swipeAction">
  <view>
    内容区域
  </view>
  <button @click="close">删除</button>
</uni-swipe-action>

ref="swipeAction"： 为组件设置一个引用，以便可以通过 JavaScript 访问它。
@click="close"： 在删除按钮上添加一个点击事件监听器，它将在点击时触发 close 方法。

3. 在 JavaScript 中关闭组件

在 JavaScript 中，创建 close 方法以关闭组件，防止它在点击删除按钮时自动收缩：

methods: {
  close() {
    this.$refs.swipeAction.close();
  },
},

代码示例

以下是完整的代码示例：

<template>
  <uni-swipe-action ref="swipeAction">
    <view>
      内容区域
    </view>
    <button @click="close">删除</button>
  </uni-swipe-action>
</template>

<script>
import uniSwipeAction from '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action';

Vue.component('uni-swipe-action', uniSwipeAction);

export default {
  methods: {
    close() {
      this.$refs.swipeAction.close();
    },
  },
};
</script>