SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

  1. "usingComponents": {
  2.   "van-swipe-cell": "@vant/weapp/swipe-cell/index"
  3. }

代码演示

基础用法

  1. <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  2.   <view slot="left">选择</view>
  3.   <van-cell-group>
  4.     <van-cell title="单元格" value="内容" />
  5.   </van-cell-group>
  6.   <view slot="right">删除</view>
  7. </van-swipe-cell>

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

  1. <van-swipe-cell
  2.   id="swipe-cell"
  3.   right-width="{{ 65 }}"
  4.   left-width="{{ 65 }}"
  5.   async-close
  6.   bind:close="onClose"
  7. >
  8.   <view slot="left">选择</view>
  9.   <van-cell-group>
  10.     <van-cell title="单元格" value="内容" />
  11.   </van-cell-group>
  12.   <view slot="right">删除</view>
  13. </van-swipe-cell>
  1. Page({
  2.   onClose(event) {
  3.     const { position, instance } = event.detail;
  4.     switch (position) {
  5.       case 'left':
  6.       case 'cell':
  7.         instance.close();
  8.         break;
  9.       case 'right':
  10.         Dialog.confirm({
  11.           message: '确定删除吗？',
  12.         }).then(() => {
  13.           instance.close();
  14.         });
  15.         break;
  16.     }
  17.   },
  18. });

主动打开

  1. <van-swipe-cell
  2.   id="swipe-cell2"
  3.   right-width="{{ 65 }}"
  4.   left-width="{{ 65 }}"
  5.   name="示例"
  6.   bind:open="onOpen"
  7. >
  8.   <view slot="left" class="van-swipe-cell__left">选择</view>
  9.   <van-cell-group>
  10.     <van-cell title="单元格" value="内容" />
  11.   </van-cell-group>
  12.   <view slot="right" class="van-swipe-cell__right">删除</view>
  13. </van-swipe-cell>
  1. Page({
  2.   onOpen(event) {
  3.     const { position, name } = event.detail;
  4.     switch (position) {
  5.       case 'left':
  6.         Notify({
  7.           type: 'primary',
  8.           message: `${name}${position}部分展示open事件被触发`,
  9.         });
  10.         break;
  11.       case 'right':
  12.         Notify({
  13.           type: 'primary',
  14.           message: `${name}${position}部分展示open事件被触发`,
  15.         });
  16.         break;
  17.     }
  18.   },
  19. });

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
bind:click点击时触发关闭时的点击位置 (left right cell outside)
bind:close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
bind:open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏

SwipeCell 滑动单元格 - 图1