SwipeAction 滑动操作

通过滑动触发选项的容器，组件名：uni-swipe-action

使用方式：

在 script 中引用组件 

  1. import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue"
  2. export default {
  3.     components: {uniSwipeAction}
  4. }

一般用法

  1. // 组件
  2. <uni-swipe-action :options="options">
  3.     <view class='cont'>SwipeAction 基础使用场景</view>
  4. </uni-swipe-action>
  6. // script
  8. import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue";
  9. export default {
  10.     components: {
  11.         uniSwipeAction
  12.     },
  13.     data() {
  14.         return {
  15.             options: [{
  16.                 text: '取消',
  17.                 style: {
  18.                     backgroundColor: '#007aff'
  19.                 }
  20.             }, {
  21.                 text: '确认',
  22.                 style: {
  23.                     backgroundColor: '#dd524d'
  24.                 }
  25.             }]
  26.         }
  27.     }
  28. }

禁止滑动

  1. <uni-swipe-action :disabled="true" :options="options">
  2.     <view class='cont'>禁止滑动示例</view>
  3. </uni-swipe-action>

传递点击事件

  1. <uni-swipe-action @click="bindClick" :options="options">
  2.     <view class='cont'>点击选项时触发事件</view>
  3. </uni-swipe-action>

与 List 组件使用

  1. <uni-list>
  2.     <uni-swipe-action :options="options1">
  3.         <uni-list-item title="item1" show-arrow="false"></uni-list-item>
  4.     </uni-swipe-action>
  5.     <uni-swipe-action :options="options2">
  6.         <uni-list-item title="item2" show-arrow="false"></uni-list-item>
  7.     </uni-swipe-action>
  8.     <uni-swipe-action :options="options3">
  9.         <uni-list-item title="item3" show-arrow="false"></uni-list-item>
  10.     </uni-swipe-action>
  11. </uni-list>

SwipeAction 属性说明：

属性名类型默认值是否必填说明
is-openedBooleanfalse否是否为开启状态
disabledBooleanfalse否是否禁止滑动
auto-closeBooleantrue否在组件开启状态时点击组件，是否自动关闭
optionsArray<Object></td>-是组件选项内容及样式

options 参数说明

参数类型是否必填说明
textString是按钮的文字
styleObject否按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：28upx

SwipeAction 事件说明：

事件称名说明返回参数
click点击选项按钮时触发事件{text,style,index} ，text（按钮文字）、style（按钮的样式）、index（下标）
opened完全打开时触发-
closed完全关闭时触发-

Tips