Framework7 Swipeout取消操作无回调？如何让列表项复位？

这不是Framework7的bug，是因为默认的data-confirm对话框没有关联swipeout的复位逻辑——当你点击取消时，对话框关闭了，但swipeout的状态并没有被重置，需要我们手动调用API来完成这个操作。

解决方案：手动绑定点击事件替代默认data-confirm #

默认的data-confirm虽然方便，但无法在取消时触发swipeout复位。我们可以自己绑定点击事件，使用Framework7的对话框组件，在回调中处理复位和删除逻辑：

修改后的HTML（移除data-confirm属性）：

<li class="swipeout deleted-callback" data-id="my-id-xxx">
  <!-- 商品内容 -->
  <div class="swipeout-actions-right">
    <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
  </div>
</li>

JavaScript逻辑：

// 假设你已经初始化了Framework7实例
var app = new Framework7();

$('.swipeout-delete').on('click', function(e) {
  e.preventDefault();
  // 获取当前对应的swipeout元素
  var $swipeoutItem = $(this).closest('.swipeout');
  var productId = $swipeoutItem.data('id');

  // 弹出自定义确认对话框
  app.dialog.confirm('Delete?', function() {
    // 点击确定：删除商品 + 关闭swipeout
    deleteProduct(productId);
    app.swipeout.close($swipeoutItem[0]);
  }, function() {
    // 点击取消：仅关闭swipeout，复位状态
    app.swipeout.close($swipeoutItem[0]);
  });
});

// 保留原有的deleted事件监听（如果需要依赖该事件触发删除逻辑）
$('.deleted-callback').on('swipeout:deleted', function() {
  deleteProduct($(this).data('id'));
});

关键说明： #

• 使用app.swipeout.close(el)方法可以强制关闭指定的swipeout元素，让它回到初始状态。
• 手动绑定点击事件后，我们可以完全控制确认对话框的两个回调分支，分别处理删除和复位逻辑。
• 如果你坚持想用data-confirm属性，可以监听confirm:cancel全局事件，然后在事件中找到当前打开的swipeout并关闭它，但这种方式不如手动绑定灵活：

  $(document).on('confirm:cancel', function() {
    // 找到当前处于打开状态的swipeout
    var openSwipeout = $('.swipeout-opened')[0];
    if (openSwipeout) {
      app.swipeout.close(openSwipeout);
    }
  });
  

这样修改后，点击取消按钮时，商品li就会自动复位到正常状态了。

内容的提问来源于stack exchange，提问作者Adrian