SwipeCell 滑动单元格

介绍

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

引入

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