[applet] vant sliding cell adds the function of clicking other positions to close automatically

Use... In projects today vant Of SwipeCell Sliding cells to delete shopping cart by sliding left , The simplified code is as follows

<view wx:for="{
     {cart}}" wx:key="id">
  <van-swipe-cell right-width="{
     { 65 }}" bind:open="onOpen">
    <van-cell-group>
      <van-cell title="{
     {item.title}}" value="{
     {item.value}}" />
    </van-cell-group>
    <view slot="right" class="right" bindtap="onDelete" data-id="{
     {item.id}}"> Delete </view>
  </van-swipe-cell>
</view>

.right{
    
  background-color: red;
  height: inherit;
  width: 65px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Page({
    
  data: {
    
    cart: [
      {
     id: "001", title: "iPhone", value: " mobile phone " },
      {
     id: "002", title: "MacBook", value: " The notebook " },
      {
     id: "003", title: "AirPods", value: " The headset " },
    ],
  },
  onDelete() {
    
    console.log("delete", event.target.dataset.id);
  },
  onOpen() {
    
    console.log("open");
  },
});

But there's a problem ： Clicking on a blank position cannot automatically close

After checking, I found that the official did not provide this function , And some people have experienced similar problems
https://github.com/youzan/vant-weapp/issues/4660
https://blog.csdn.net/pannikin/article/details/118526160

The final solution is to open The instance of the cell is stored in the variable , When responding to a click event , Call instance methods one by one from instances in variables close
The code is as follows ：

<!-- cart/cart.wxml -->
<view class="page-view" bindtap="onTap">
  <view wx:for="{
     {cart}}" wx:key="id">
    <van-swipe-cell id="wx{
     {item.id}}" right-width="{
     { 65 }}" data-id="{
     {item.id}}" bind:open="onOpen">
      <van-cell-group>
        <van-cell title="{
     {item.title}}" value="{
     {item.value}}" />
      </van-cell-group>
      <view slot="right" class="right" bindtap="onDelete" data-id="{
     {item.id}}"> Delete </view>
    </van-swipe-cell>
  </view>
</view>

page{
    
  height: 100%;
}
.page-view{
    
  height: 100%;
}
.right{
    
  background-color: red;
  height: inherit;
  width: 65px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Page({
    
  data: {
    
    cart: [
      {
     id: "001", title: "iPhone", value: " mobile phone " },
      {
     id: "002", title: "MacBook", value: " The notebook " },
      {
     id: "003", title: "AirPods", value: " The headset " },
    ],
    selected: [],
  },
  onDelete(event) {
    
    console.log("delete", event.target.dataset.id);
  },
  onOpen(event) {
    
    console.log("open");
    //  according to id choice instance
    let instance = this.selectComponent(`#${
      event.target.id}`);
    this.data.selected.push(instance);
  },
  onTap() {
    
    console.log("tap");
    //  Cycle off 
    this.data.selected.forEach(function (instance) {
    
      instance.close();
    });
    //  Empty 
    this.data.selected = [];
  },
});

You will find that in the process of obtaining instances , It's through the elements id In combination with this.selectComponent Method to find , The element id When rendering, use the... In the business data id. The reason for this is , It's all because open There is no... In the parameters of the event instance, If there is one, it can be written like this

...
  onOpen(event) {
    
    const {
     position, instance } = event.detail;
    this.data.selected.push(instance);
  },
...

Unfortunately, this is just wishful thinking , The authorities do not support

Reference resources ：https://youzan.github.io/vant-weapp/#/swipe-cell