@retailwe/ui-swiper-cell NPM

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