swipe-action 左滑删除组件

介绍

左滑拉出操作按钮，可用于删除、关注等场景

使用指南

列表

<tms-swipe-action
  extClass="ext-slide-item"
  class="slide-item"
  wx:for="{{orders}}"
  wx:key="index"
  data-index="{{index}}"
  buttons="{{slideButtons}}"
  selector=".slide-item"
  bind:click-button="clickSlideButton"
>
  <view class="content" bindtap="toDetail">slideItem</view>
</tms-swipe-action>

Component({
    data: {
      orders: [],
      slideButtons: [
        {
          text: '删除',
          type: 'warning',  // 设置按钮类型，如不满足可自定义按钮样式
          btnExtStyle: 'width: 170rpx; font-size: 32rpx',  // 默认宽度140rpx
        },
        {
          text: '关闭',
          type: 'default',
          btnExtClass: 'btn-ext-class', // 自定义按钮样式
          btnExtStyle: 'width: 170rpx; font-size: 36rpx',
        },
        {
          icon: true, // 图标按钮
          iconPath: './images/favor.png',
          btnExtStyle: 'width: 170rpx; background-color: white',
          iconExtClass: 'icon-ext-class',
          iconExtStyle: 'width: 50rpx;',
        },
      ],
    }
})

API

属性	说明	类型	默认值	必填
extClass	添加在组件内部结构的class，可用于修改组件内部的样式	string
buttons	按钮组	array	[]	是
buttons[i].type	按钮类型: default、warning	string	default	否
buttons[i].icon	是否使用图标代替文本	boolean	false	否
buttons[i].iconPath	图标路径	string		否
buttons[i].text	按钮文案	string		否
buttons[i].data	自定义数据	object		否
buttons[i].btnExtClass	按钮的额外的class，可用于修改组件内部的样式	string		否
buttons[i].iconExtClass	图标的额外的class，可用于修改组件内部的样式	string		否
buttons[i].btnExtStyle	按钮的额外的style，可用于修改组件内部的样式，如:'color: red' (优先级更高)	string		否
buttons[i].iconExtStyle	图标的额外的style，可用于修改组件内部的样式，如:'color: red' (优先级更高)	string		否
disable	是否禁用滑出	boolean	false
showBtns	显示隐藏按钮组	Boolean	false
duration	显示隐藏的动画的时长	number	350ms
throttle	触发显示隐藏的最小手指滑动距离	number	40
autoHide	滑出时自动隐藏其他项	boolean	true
selector	选择页面上所有该组件的选择器，例: .a，#a等	string	false	autoHide为true时必填

EVENTS

属性	说明	类型
bind:start	开始滑动	eventhandle
bind:hide	按钮组被隐藏 event.detail = { triggerTarget, btn}	eventhandle
bind:show	按钮组被展示 event.detail = { triggerTarget }	eventhandle
bind:click-button	按钮点击 event.detail = { btn }	eventhandle

event.detail

属性	说明	取值
triggerTarget	触发源	switch: 设置show属性; touch: 用户滑动; button: 点击按钮;
btn	按钮数据	index: 点击的按钮索引; data: 用户自定义数据;

FAQ