# next-swipe-action适用于uni-app项目的滑动操作、左滑删除、滑动删除组件
### 本组件目前兼容微信小程序、H5、APP


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

### 如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合；
[点击链接加入群聊前端开发（uniapp插件）】](https://qm.qq.com/q/S1bJzQfJAG)

### 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>
```

### 属性说明
| 名称                         | 类型           | 默认值               | 描述            |
| ----------------------------|--------------- | -------------------- | ---------------|
| index                       | Number         | 0                    | 当前列索引
| disabled                    | Boolean        | false                | 是否禁用左滑
| btnGroup                    | Array          | 默认显示编辑、删除     | 操作按钮数组信息，默认显示编辑、删除，可自定义传入
| btnClickAutoReset           | Boolean        | true                 | 按钮点击后是否重置


## Event 事件
|事件名	|说明																										|类型	|回调参数	|
|----		|----																										|----	|----			|
|btnClick|自定义按钮点击事件																		  |emit	|Object		|