如何在微信小程序中优化SwipeCell组件的自动收起功能-解决方案

为了解决这个问题，我们可以在用户点击页面空白区域或其他SwipeCell时，自动关闭当前打开的滑块。

1. 存储打开的滑块ID

首先，我们需要在页面的data中添加一个变量来存储当前打开的滑块的ID。

data: {
  openedSwipCellId: null
},

2. 打开滑块时存储ID

当滑块被打开时，我们通过onSwipeCellOpen事件获取滑块的ID，并存储到openedSwipCellId中。

onSwipeCellOpen(e) {
  this.setData({
    openedSwipCellId: e.target.id
  });
},

3. 关闭滑块

当用户点击页面空白区域或其他SwipeCell时，我们调用onSwipeCellClose方法来关闭当前打开的滑块，并清空存储的ID。

onSwipeCellClose() {
  const openedSwipCellId = this.data.openedSwipCellId;
  if (openedSwipCellId) {
    this.selectComponent(`#${openedSwipCellId}`).close();
    this.setData({
      openedSwipCellId: null
    });
  }
},

4. 绑定事件

我们需要给页面和列表项绑定点击事件，以便在点击时触发onSwipeCellClose方法。

<view class="container address-list" bind:tap="onSwipeCellClose">
  <van-swipe-cell right-width="65" bind:open="onSwipeCellOpen" bind:click="onSwipeCellClose" id="swip-cell-{{item.id}}">
    <!-- 滑块内容 -->
  </van-swipe-cell>
</view>

封装为Behavior

为了提高代码的复用性，我们可以将上述逻辑封装成一个Behavior。

export const swipeCellBehavior = Behavior({
  data: {
    openedSwipCellId: null
  },

  methods: {
    onSwipeCellOpen(e) {
      this.setData({
        openedSwipCellId: e.target.id
      });
    },
    onSwipeCellClose() {
      const openedSwipCellId = this.data.openedSwipCellId;
      if (openedSwipCellId) {
        this.selectComponent(`#${openedSwipCellId}`).close();
        this.setData({
          openedSwipCellId: null
        });
      }
    }
  }
});

在页面中引入并使用这个Behavior：

Page({
  behaviors: [swipeCellBehavior],
  // 其他页面逻辑
});

秒客网