mx-swipe-cell 滑动单元格

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

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-swipe-cell": "/miniprogram_npm/m-ui/mx-swipe-cell/index",
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

通过title添加标题的名称。

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

异步关闭。

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

<mx-swipe-cell
  id="swipe-cell"
  right-width="{{ 65 }}"
  left-width="{{ 65 }}"
  async-close
  bind:close="onClose"
>
  <view slot="left">选择</view>
  <mx-cell-group>
    <mx-cell title="单元格" value="内容" />
  </mx-cell-group>
  <view slot="right">删除</view>
</mx-swipe-cell>>

Page({
   onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
      case 'left':
      case 'cell':
        instance.close();
        break;
      case 'right':
        Dialog.confirm({
          message: '确定删除吗？',
        }).then(() => {
          instance.close();
        });
        break;
    }
  },
});

主动打开

<mx-swipe-cell
  id="swipe-cell2"
  right-width="{{ 65 }}"
  left-width="{{ 65 }}"
  name="示例"
  bind:open="onOpen"
>
  <view slot="left" class="mx-swipe-cell__left">选择</view>
  <mx-cell-group>
    <mx-cell title="单元格" value="内容" />
  </mx-cell-group>
  <view slot="right" class="mx-swipe-cell__right">删除</view>
</mx-swipe-cell>

Page({
   onOpen(event) {
    const { position, name } = event.detail;
    switch (position) {
      case 'left':
        wx.showToast({
          title: `${name}${position}部分展示open事件被触发`,
        });
        break;
      case 'right':
        wx.showToast({
          title: `${name}${position}部分展示open事件被触发`,
        });
        break;
    }
  },
});

API

navbar Props

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

solt

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

Event

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

close 参数

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