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

最新推荐文章于 2024-07-23 08:55:57 发布

前端-文龙刚

最新推荐文章于 2024-07-23 08:55:57 发布

阅读量1.3k

点赞数

分类专栏：小程序文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/qq_17211063/article/details/130676850

版权

小程序专栏收录该内容

84 篇文章 0 订阅

订阅专栏

需求：在原生微信小程序中使用了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 组件库