uni-app中swipe-action结合uni-card遍历卡片时，单个卡片点击按钮无法自动恢复none位置，求解答

问题描述

代码如上，我点击任意一个卡片的按钮，无法自动恢复到none位置，尽管我为每个卡片单独设置了isOpened状态，为什么？

<view v-if="taskForSelectedDate && taskForSelectedDate.length > 0" class="task-content">  
    <!-- 遍历任务并渲染每个任务为卡片 -->  
    <uni-swipe-action>  
        <uni-swipe-action-item   
            v-for="(task, index) in taskForSelectedDate"   
            :key="task.id"   
            :left-options="options"  
            :right-options="[]"   
            :show="task.isOpened ? 'left' : 'none'"  <!-- 使用 task.isOpened 控制显示 -->  
            :auto-close="true"   
            @change="change"  
            @click="(e)=>bindClick(e,task)"><!-- 传递事件、任务 -->  
            <uni-card :style="{ backgroundColor: task.isEditing ? '#2ddb58' : '#dddddd' }" :title="task.title"  
                :sub-title="selectedDate" thumbnail="../../static/personalCenter/taskCard1.png">  
                <text>{{ task.content }}</text> <!-- 使用 task.content 作为内容 -->  
            </uni-card>  
        </uni-swipe-action-item>  
    </uni-swipe-action>  
</view>

这段代码，我设置了一个全局的状态isOpened，滑动一张卡片，所有卡片都会滑动，但是我点击按钮时，所有卡片都会自动恢复到none位置。

哎，是鱼和熊掌不可得兼吗，我既想单独滑动，又想自动恢复none位置，怎么办，求解答

更多关于uni-app中swipe-action结合uni-card遍历卡片时，单个卡片点击按钮无法自动恢复none位置，求解答的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

在uni-app中，使用swipe-action组件结合uni-card组件实现卡片滑动操作，并希望在点击按钮后卡片能自动恢复到none位置（即初始未滑动的状态），可以通过监听按钮点击事件，手动触发swipe-action的关闭动作。以下是一个示例代码，展示了如何实现这一功能。

首先，确保你的uni-app项目中已经安装了uni-ui组件库（包含uni-card组件），并正确引入了相关组件。

示例代码

<template>
  <view class="container">
    <swipe-action @close="onSwipeClose" auto-close="false">
      <view v-for="(item, index) in cardList" :key="index" class="card-wrapper">
        <uni-card>
          <view class="card-content">
            {{ item.title }}
          </view>
          <swipe-action-button @click="handleButtonClick(index)">
            点击我
          </swipe-action-button>
        </uni-card>
      </view>
    </swipe-action>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [
        { title: '卡片1' },
        { title: '卡片2' },
        { title: '卡片3' }
      ]
    };
  },
  methods: {
    handleButtonClick(index) {
      // 处理按钮点击逻辑，比如发送请求等
      console.log(`卡片 ${index + 1} 被点击`);

      // 手动触发 swipe-action 的关闭动作
      this.$nextTick(() => {
        const swipeActionElement = this.$el.querySelector(`.card-wrapper:nth-child(${index + 1}) .uni-swipe-action`);
        if (swipeActionElement) {
          swipeActionElement.close();
        }
      });
    },
    onSwipeClose() {
      console.log('swipe-action 已关闭');
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
.card-wrapper {
  margin-bottom: 16px;
}
.card-content {
  padding: 16px;
}
</style>

解释

模板部分：使用v-for指令遍历cardList数组，生成多个卡片。每个卡片内部包含一个swipe-action-button，并绑定点击事件。
脚本部分：
- handleButtonClick方法处理按钮点击事件，在点击后通过this.$nextTick确保DOM更新完成，然后选中对应的swipe-action元素并调用其close方法。
- onSwipeClose方法用于监听swipe-action的关闭事件（虽然在这个示例中并未实际使用）。
样式部分：简单的样式定义，用于布局和美化卡片。

注意，由于swipe-action组件可能不支持直接访问其DOM方法（如close），上述代码中的swipeActionElement.close()是基于假设的实现，实际使用时可能需要根据uni-app和uni-ui的具体实现进行调整。如果swipe-action组件没有提供直接的关闭方法，可以考虑通过设置状态来控制swipe-action的显示与隐藏。