• SwipeAction 滑动操作

    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

    • 组件实际运行效果参考：https://github.com/dcloudio/uni-ui
    • npm 使用方式参考：https://ext.dcloud.net.cn/plugin?id=55
    • 如果需要在组件上使用 v-for 循环，需要使用 hbuilderX1.9+ 版本，并开启自定义组件编译模式，详见