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 左侧按钮组,当 useSlotsfalse 时才生效 []
left[].text string 按钮文本 -
left[].style string 按钮样式 -
right array 右侧按钮组,当 useSlotsfalse 时才生效 []
right[].text string 按钮文本 -
right[].style string 按钮样式 -
useSlots boolean 是否使用插槽 false
bind:click function 点击事件 -
bind:open function 打开事件 -
bind:close function 关闭事件 -

SwipeAction slot

名称 描述
- 自定义内容
left 自定义左侧按钮组,当 useSlotstrue 时才生效
right 自定义右侧按钮组,当 useSlotstrue 时才生效

SwipeAction externalClasses

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