SwipeCell 滑动单元格

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-swipe-cell": "path/to/vant-weapp/dist/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>

异步关闭

  1. <van-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
  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>
  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. });

API

参数说明类型默认值版本
left-width左侧滑动区域宽度Number0-
right-width右侧滑动区域宽度Number0-
async-close是否异步关闭Booleanfalse-
disabled是否禁用滑动Booleanfalse1.3.4

Slot

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

Event

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close点击时触发整体是一个 Object，包含 position, instance 两个 key。

close 参数

参数类型说明
positionString关闭时的点击位置 (left right cell outside)
instanceObjectSwipeCell 实例

方法

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

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

原文: https://youzan.github.io/vant-weapp/#/swipe-cell