Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@retailwe/ui-swiper-cell

引入

readme

swiper-cell 可滑动单元格

引入

全局引入,在miniprogram根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-swiper-cell": "@retailwe/ui-swiper-cell/index"
}

代码演示

基础用法

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

异步关闭

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

<wr-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
  <view slot="left">选择</view>
  <wr-cell-group>
    <wr-cell title="单元格" value="内容" />
  </wr-cell-group>
  <view slot="right">删除</view>
</wr-swipe-cell>
Page({
  onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
      case 'left':
        Dialog.alert({
          message: '选择成功'
        }).then(() => {
          instance.close();
        });
        break;
      case 'cell':
        instance.close();
        break;
      case 'right':
        Dialog.confirm({
          message: '确定删除吗?'
        }).then(() => {
          instance.close();
        }).catch(() => { console.log('取消删除'); });
        break;
    }
  }
});

API

Props

参数 说明 类型 默认值 版本
name 标识符,可以在 close 事件的参数中获取到 string | number - -
left-width 左侧滑动区域宽度 number 0 -
right-width 右侧滑动区域宽度 number 0 -
async-close 是否异步关闭 boolean false -
disabled 是否禁用滑动 boolean false 1.3.4

Slot

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

Events

事件名 说明 参数
click 点击时触发 关闭时的点击位置 (left right cell outside)

close 参数

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

方法

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

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