Fusions

Appearance

SwipeAction 滑动菜单 ​

iPhone

此组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 fu-swipe-action 搭配 fu-swipe-action-item 来实现左滑菜单功能。
  • 通过 slot 传入内部内容即可，可以将 v-for 的 index 索引值传递给 index 属性，用于点击时在回调方法中对某一个数据进行操作（点击回调时第一个参数返回此索引值）
  • 内部按钮通过 leftOptions 或 rightOptions 属性配置，此属性作为一个数组，元素为对象，可以配置按钮的问题，背景颜色（建议配置两个参数即可），请忽配置宽高等属性
html
<template>
    <fu-swipe-action class="fu-m-t-20">
        <fu-swipe-action-item :right-options="options" @click="onClick">
            <view class="swipe-action__item fu-flex fu-flex-column-center">
                <view class="swipe-action__item__image">
                    <image :src="avatar" mode="scaleToFill"></image>
                </view>
                <view class="swipe-action__item__info">
                    <view class="swipe-action__item__info__title">基本使用</view>
                    <view class="swipe-action__item__info__desc">向左滑动即可看到</view>
                </view>
            </view>
        </fu-swipe-action-item>
    </fu-swipe-action>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const options = reactive([{
        text: '取消',
        style: {
            backgroundColor: '#007aff'
        }
    }, {
        text: '确认',
        style: {
            backgroundColor: '#dd524d'
        }
    }]);
</script>

<style lang="scss">
    .swipe-action__item {
        padding: 10rpx 0;

        &__image {
            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 20rpx;
            }
        }

        &__info {
            margin-left: 20rpx;

            &__title {
                font-size: 30rpx;
                font-weight: bold;
            }

            &__desc {
                margin-top: 5rpx;
                font-size: 22rpx;
                color: #999999;
            }
        }
    }
</style>

点击事件 ​

通过 click 点击事件回调中，有两个参数，第一个参数为通过 Props 传入的 index 参数，第二个参数为滑动按钮的索引，即 options 数组的索引， 用于标识第几个按钮被点击

API ​

SwipeAction Slot ​

名称说明
default默认插槽，用于放置 SwipeActionItem 组件

SwipeActionItem Props ​

属性名说明类型默认值可选值
show开启或关闭组件Stringnoneleft/right
disabled是否禁止滑动Booleanfalsetrue
autoClose滑动打开当前组件，是否关闭其他组件Booleantruefalse
threshold滑动距离阈值，只有大于此值，才被认为是要打开菜单Number20-
leftOptions左侧按钮配置项Array--
rightOptions右侧按钮配置项Array--

SwipeActionItem Events ​

事件名说明回调参数
click按钮被点击时触发() => void
change组件打开或关闭时触发() => void

SwipeActionItem Slot ​

名称说明
default默认插槽，用于放置自定义内容
left左侧按钮插槽，用于自定义左侧按钮
right右侧按钮插槽，用于自定义右侧按钮