更新记录

1.0.1（2024-09-14） 下载此版本

更新说明

1.0.0（2023-11-22） 下载此版本

组件初始化

平台兼容性

uni-app

next-swipe-action适用于uni-app项目的滑动操作、左滑删除、滑动删除组件

本组件目前兼容微信小程序、H5、APP

遇到问题或有建议可以加入QQ群(455948571)反馈;
如果觉得组件不错，给五星鼓励鼓励咯;

如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合； 点击链接加入群聊前端开发（uniapp插件）】

vue3使用示例

<template>
    <view class="container">
        <view class="title"><text>next-swipe-action 演示demo</text></view>
        <view class="list" v-for="(item,index) in list" :key="index">
            <next-swipe-action :btnGroup="btnGroup" :disabled="index===2 || index===4" :index="index" @btnClick="onclick">
                <view class="item">
                    <image class="item-img" src="https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                    </image>
                    <view class="item-name">{{item}}</view>
                </view>
            </next-swipe-action>
        </view>
    </view>
</template>
<script setup lang="ts">
    import { ref } from 'vue'

    const list = ref(['李先生','张小姐','武sir-禁用','黎先生','刘sir-禁用','欧阳小姐'])
    const btnGroup = ref([
        {
            name: '修改',
            action: 'edit',
            style: {
                bgColor: '#f9ae3d'
            }
        },
        {
            name: '删除',
            action: 'del',
            style: {
                bgColor: '#ff4d4f'
            }
        },
        {
            name: '审核',
            action: 'audit',
            style: {
                bgColor: '#b7eb8f'
            }
        },
    ]);
    //点击操作回调事件
    function onclick(e) {
        console.log('所点击的列表索引：' , e.index)
        console.log('所点击的按钮数据：' , e.item)
    }
</script>
<style scoped>
    .container {
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
    }
    .title {
        color: #666;
        padding: 30rpx;

    }
    .list {
        width: 100%;
        margin-top: 1px;
    }

    .item {
        width: 100%;
        height: 120rpx;
        border-bottom: 1rpx solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .item-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-left: 30rpx;
    }

    .item-name {
        margin-left: 20rpx;
        font-size: 30rpx;
        color: #666666;
    }
</style>

属性说明

Event 事件