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

Slot

Events

close 参数

方法

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