微信小程序中使用VantUI中van-swipe-cell点击其他区域关闭删除

需求：在原生微信小程序中使用了VantUI框架的SwipeCell 滑动单元格，当我左滑删除时，点击其他区域让删除隐藏

效果图： 

 

WXML：

<block wx:for="{
   
   {list}}" wx:key="id">
        <van-swipe-cell id="wx{
   
   {item.id}}" right-width="{
   
   {65}}" disabled="{
   
   {state=='1'}}" bind:open="onOpen">
            <van-cell-group>
                <view role="option" class="weui-cell  weui-cell_example" data-id="{
   
   {item.id}}" data-parentId="{
   
   {item.parentId}}" catchtap="getQuestion">
                    <view class="weui-cell__bd">
                        <view class="">{
   
   {index+1}}、{
   
   {item.problems}}</view>
                        <text class="update">{
   
   {filter.formatDateHM(item.optime)}}</text>
                    </view>
                </view>
            </van-cell-group>
            <view slot="right" class="deleteQuestion pa" data-item="{
   
   {item}}" catchtap="deleteQuestion">删除</view>
        </van-swipe-cell>
        </block>

JS：

Page({
  data: {
    selected:'',//用来存储左滑的当前ID
    list:[],
  },
  onOpen(e){//这是左滑打开事件
    this.setData({
      selected:e.currentTarget.id
    })
  },
  onTap(){//这是点击其他区域时，根据id让当前打开的元素关闭
    this.selectComponent("#"+this.data.selected+"").close();
  }
})

注：我这里做的跟官方的做法有些区别，但是我感觉我这种好点，简单        (#^.^#)

Vant Weapp - 轻量、可靠的小程序 UI 组件库