vant-weapp/packages/swipe-cell

SwipeCell 滑动单元格

使用指南

在 index.json 中引入组件

"usingComponents": {
  "van-swipe-cell": "path/to/vant-weapp/dist/swipe-cell/index"
}

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  <view slot="left">选择</view>
  <van-cell-group>
    <van-cell title="单元格" value="内容" />
  </van-cell-group>
  <view slot="right">删除</view>
</van-swipe-cell>

异步关闭

<van-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
  <view slot="left">选择</view>
  <van-cell-group>
    <van-cell title="单元格" value="内容" />
  </van-cell-group>
  <view slot="right">删除</view>
</van-swipe-cell>

export default {
  methods: {
    onClose(event) {
      const { position, instance } = event.detail;
      switch (position) {
        case 'left':
        case 'cell':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close();
          });
          break;
      }
    }
  }
}

API

参数	说明	类型	默认值	版本
left-width	左侧滑动区域宽度	Number	0	-
right-width	右侧滑动区域宽度	Number	0	-
async-close	是否异步关闭	Boolean	false	-
disabled	是否禁用滑动	Boolean	false	1.3.4

Slot

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

Event

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

close 参数

参数	类型	说明
position	String	关闭时的点击位置 (left right cell outside)
instance	Object	SwipeCell 实例

方法

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

方法名	参数	返回值	介绍
open	position: `left	right`	-
close	-	-	收起单元格侧边栏