【小程序】Vant滑动单元格添加点击其他位置自动关闭的功能

原创

已于 2022-05-25 08:25:05 修改 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #前端 #vant

于 2022-05-24 17:01:22 首次发布

本文介绍了在微信小程序中使用 vant 的 SwipeCell 组件实现左滑删除购物车效果时遇到的问题及解决方案。当点击空白区域无法自动关闭 SwipeCell，作者通过在 open 事件中保存单元格实例，并在页面点击时遍历关闭所有已打开的单元格，实现了预期功能。此外，文章还分享了获取组件实例的方法以及对于官方未提供某些功能的遗憾。

今天在项目中使用vant 的SwipeCell 滑动单元格实现左滑删除购物车的效果，精简后的代码如下

<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}}">删除</view>
  </van-swipe-cell>
</view>

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