滑动单元格 SwipeCell

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-swipe-cell": "@titian-design/weapp/swpie-cell/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-swipe-cell": "platform://titian-mp/ti-swipe-cell"
  }
}

用法示例

基本使用

copy

code

<ti-swipe-cell>
  <div slot="left">left</div>
  <div class="center">center</div>
  <div slot="right">right</div>
</ti-swipe-cell>

禁用滑动

copy

code

<ti-swipe-cell disabled>
  <div slot="left">left</div>
  <div class="center">center</div>
  <div slot="right">right</div>
</ti-swipe-cell>

事件监听

• App.wxml
• index.js

code

copy

code

<ti-swipe-cell bind:open="handleOpen" bind:close="handleClose" bind:click="handleTiClick">
  <view slot="left">left</view>
  <view class="center">center</view>
  <view slot="right">right</view>
</ti-swipe-cell>

copy

code

Page({
  handleOpen(e) {
    console.log('打开', e);
  },
  handleClose(e) {
    console.log('关闭', e);
  },
  handleTiClick(e) {
    console.log('点击事件触发了', e);
  },
});

自定义宽度

copy

code

<ti-swipe-cell leftWidth="{{200}}">
  <view slot="left">left</view>
  <view>center</view>
</ti-swipe-cell>

<ti-swipe-cell rightWidth="{{200}}">
  <view>center</view>
  <view slot="right">right</view>
</ti-swipe-cell>

异步操作控制

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">控制</ti-button>
<ti-swipe-cell visible="{{visible}}">
  <view slot="left">left</view>
  <view>center</view>
</ti-swipe-cell>

copy

code

Page({
  data: {
    visible: false,
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

ti-swipe-cell API

属性 Properties

名称	类型	必填	默认值	说明	备注
left-width	number	否	0	左边滑动区域宽度	-
right-width	number	否	0	右边滑动区域宽度	-
visible	boolean	否	false	设置可滑动区域划开	会先从左边到右开始查找是否有内容用于展示
disabled	boolean	否	false	禁止滑动	-
async-close	boolean	否	false	是否异步关闭	-
name	string	否	-	唯一标识	-

事件 Events

事件名	参数	说明	备注
bind:open	(e: WechatMiniprogram.CustomEvent<OpenParams>) => void	打开时触发	-
bind:close	(e: WechatMiniprogram.CustomEvent<CloseParams>) => void	关闭时触发	-
bind:click	(e: WechatMiniprogram.CustomEvent<left | right | outside | cell >) => void	点击时触发	关闭时的点击位置 (left right cell outside)

OpenParams

interface OpenParams {
  position: Position;
  name: string;
}

CloseParams

interface CloseParams {
  position: ClickPosition;
  name: string;
  instance: TiSwipeCell;
}

插槽 Slots

名称	说明	备注
right	右侧内容	-
left	左侧内容	-

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-