SwipeAction 滑动操作

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

使用方式:

script 中引用组件

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

一般用法

// 组件
<uni-swipe-action :options="options">
    <view class='cont'>SwipeAction 基础使用场景</view>
</uni-swipe-action>

// script

import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue";
export default {
    components: {
        uniSwipeAction
    },
    data() {
        return {
            options: [{
                text: '取消',
                style: {
                    backgroundColor: '#007aff'
                }
            }, {
                text: '确认',
                style: {
                    backgroundColor: '#dd524d'
                }
            }]
        }
    }
}

禁止滑动

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

传递点击事件

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

与 List 组件使用

<uni-list>
    <uni-swipe-action :options="options1">
        <uni-list-item title="item1" show-arrow="false"></uni-list-item>
    </uni-swipe-action>
    <uni-swipe-action :options="options2">
        <uni-list-item title="item2" show-arrow="false"></uni-list-item>
    </uni-swipe-action>
    <uni-swipe-action :options="options3">
        <uni-list-item title="item3" show-arrow="false"></uni-list-item>
    </uni-swipe-action>
</uni-list>

SwipeAction 属性说明:

属性名 类型 默认值 是否必填 说明
is-opened Boolean false 是否为开启状态
disabled Boolean false 是否禁止滑动
auto-close Boolean true 在组件开启状态时点击组件,是否自动关闭
options Array<Object></td> - 组件选项内容及样式

options 参数说明

参数 类型 是否必填 说明
text String 按钮的文字
style Object 按钮样式{backgroundColor,color,fontSize},backgroundColor默认为:#C7C6CD,color默认为:#FFFFFF,fontSize默认为:28upx

SwipeAction 事件说明:

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

Tips

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问