SwipeCell 滑动单元格

引入

app.jsonindex.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>

异步关闭

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

  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. });

主动打开

  1. <van-swipe-cell id="swipe-cell2" right-width="{{ 65 }}" left-width="{{ 65 }}" name="示例" bind:open="onOpen" >
  2. <view slot="left" class="van-swipe-cell__left">选择</view>
  3. <van-cell-group>
  4. <van-cell title="单元格" value="内容" />
  5. </van-cell-group>
  6. <view slot="right" class="van-swipe-cell__right">删除</view>
  7. </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是否禁用滑动booleanfalse1.3.4

Slot

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

Events

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

close 参数

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

方法

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

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

SwipeCell 滑动单元格 - 图1