SwipeAction 滑动操作

用于滑动操作组件。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "SwipeAction",
  3.     "usingComponents": {
  4.         "wux-swipe-action-group": "../../dist/swipe-action-group/index",
  5.         "wux-swipe-action": "../../dist/swipe-action/index",
  6.         "wux-cell-group": "../../dist/cell-group/index",
  7.         "wux-cell": "../../dist/cell/index",
  8.         "wux-icon": "../../dist/icon/index"
  9.     }
  10. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">SwipeAction</view>
  4.         <view class="page__desc">滑动操作</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">With swipeActionGroup</view>
  8.         <wux-swipe-action-group>
  9.             <wux-swipe-action autoClose left="{{ left }}" right="{{ right }}" bind:click="onClick">
  10.                 <view class="demo-item">Have left and right buttons</view>
  11.             </wux-swipe-action>
  12.             <wux-swipe-action autoClose left="{{ left }}">
  13.                 <view class="demo-item">Only left buttons</view>
  14.             </wux-swipe-action>
  15.             <wux-swipe-action autoClose right="{{ right }}">
  16.                 <view class="demo-item">Only right buttons</view>
  17.             </wux-swipe-action>
  18.             <wux-swipe-action autoClose useSlots>
  19.                 <view slot="left">
  20.                     <view class="demo-button"><wux-icon type="ios-heart" /></view>
  21.                 </view>
  22.                 <view slot="right">
  23.                     <view class="demo-button" bindtap="onShare"><wux-icon type="ios-share-alt" /></view>
  24.                 </view>
  25.                 <view class="demo-item">UseSlots</view>
  26.             </wux-swipe-action>
  27.         </wux-swipe-action-group>
  28.         <view class="sub-title">With cellGroup</view>
  29.         <wux-cell-group>
  30.             <wux-swipe-action autoClose left="{{ left }}" right="{{ right }}" bind:click="onClick">
  31.                 <wux-cell title="Have left and right buttons"></wux-cell>
  32.             </wux-swipe-action>
  33.             <wux-swipe-action autoClose left="{{ left }}">
  34.                 <wux-cell title="Only left buttons"></wux-cell>
  35.             </wux-swipe-action>
  36.             <wux-swipe-action autoClose right="{{ right }}">
  37.                 <wux-cell title="Only right buttons"></wux-cell>
  38.             </wux-swipe-action>
  39.         </wux-cell-group>
  40.     </view>
  41. </view>
  1. Page({
  2.     data: {
  3.         right: [{
  4.             text: 'Cancel',
  5.             style: 'background-color: #ddd; color: white',
  6.         },
  7.         {
  8.             text: 'Delete',
  9.             style: 'background-color: #F4333C; color: white',
  10.         }],
  11.         left: [{
  12.             text: 'Reply',
  13.             style: 'background-color: #108ee9; color: white',
  14.         },
  15.         {
  16.             text: 'Cancel',
  17.             style: 'background-color: #ddd; color: white',
  18.         }],
  19.     },
  20.     onClick(e) {
  21.         console.log('onClick', e.detail)
  22.     },
  23.     onShare() {
  24.         console.log('onShare')
  25.     },
  26. })

视频演示

SwipeAction

API

SwipeAction props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-swipe
autoClose boolean 是否自动关闭 false
disabled boolean 是否禁用 false
left array 左侧按钮组，当 useSlots 为 false 时才生效 []
left[].text string 按钮文本 -
left[].style string 按钮样式 -
right array 右侧按钮组，当 useSlots 为 false 时才生效 []
right[].text string 按钮文本 -
right[].style string 按钮样式 -
useSlots boolean 是否使用插槽 false
bind:click function 点击事件 -
bind:open function 打开事件 -
bind:close function 关闭事件 -

SwipeAction slot

名称 描述
- 自定义内容
left 自定义左侧按钮组，当 useSlots 为 true 时才生效
right 自定义右侧按钮组，当 useSlots 为 true 时才生效

SwipeAction externalClasses

名称 描述
wux-class 根节点样式类